Creating Custom Variants for Modules

[bearons]

Hi there,

I am working with a design team who is very methodical (and good at using Figma!). Within Figma, they have created Components for every object being used in the client’s website. Each of these Components has several variants that allow the designer to easily swap between styles depending on the use case (i.e. Button variants: [“black”, “white”, “no_border”, “wide”]). This is also to help the client stick to the design standards when they want to add pages in the future. Fortunately, HubSpot is a great tool for this in most cases… but not all.

The challenge I am facing is how to approach the development of a “Text Block” component which, per design, has twelve variants. These variants are typically comprised of 2-3 smaller components, such as “Title”, “Text + Button”, or “Avatar + Name”. Examples below.

Component comprised of two Text modules.

In this example, the content creator can choose the ‘vertical’ or ‘horizontal’ Layout variant or the ‘white’ or ‘black’ Background varient.

My question to the community is - with the idea of using variants in mind, would it be better to develop the Text Block as a custom module or as many independent modules stitched together within various Sections? From my research & hacking, it appears that I can’t provide fields for content creators using sections which would be much more involved if the client, say, wants to change the Text + Button to a vertical alignment instead of horizontal. Custom modules would solve my need pretty well, but then I will need to recreate already developed modules with new fields, like for Button. I’m also afraid of making this one massive component that just bloats anytime there’s a new variant.

Any suggestions or ideas would be super helpful! I imagine this is a challenge that the community has faced before or, if not, is a bit of a fun one.

Regards,

-b

cc: @Jnix284 @BarryGrennan @SteveHTM

[Anton]

Hey @bearons,
since I’m doing something similar myself right now:
I would recommend to create variable objects like this in the theme-overrides.css or a seperate “variables.css” file

{% set button_black = {
 "def_background" : "#000000",
 "def_color" : "#ffffff",
 "def_border" : "1px solid #ffffff",
 "def_no_border" : false
 "hov_background" : "#999999",
 "hov_color" : "#fafafa",
 "hov_border" : "1px solid #fafafa",
 "hov_no_border" : true
...
}
%}
{% set button_white = {
 "def_background" : "#ffffff",
 "def_color" : "#000000",
 "def_border" : "1px solid #000000",
 "def_no_border" : false
 "hov_background" : "#fafafa",
 "hov_color" : "#999999",
 "hov_border" : "1px solid #999999",
 "hov_no_border" : true
...
}%}

and then just write the CSS like

a.btn.buttonBlack{
 background: {{button_black.def_background}};
 color: {{ button_black.def_background }};
 {% unless button_black.def_no_border %}
 border: {{ button_black.def_border }};
 {% endunless %}
}

a.btn.buttonBlack:hover{
 background: {{button_black.hov_background}};
 color: {{ button_black.hov_background }};
 {% unless button_black.hov_no_border %}
 border: {{ button_black.hov_border }};
 {% endunless %}
}

a.btn.buttonWhite{
 background: {{button_white.def_background}};
 color: {{ button_white.def_background }};
 {% unless button_white.def_no_border %}
 border: {{ button_white.def_border }};
 {% endunless %}
}

a.btn.buttonWhite:hover{
 background: {{button_white.hov_background}};
 color: {{ button_white.hov_background }};
 {% unless button_white.hov_no_border %}
 border: {{ button_white.hov_border }};
 {% endunless %}
}

if you’re going with a seperate variables file - you have to include it in the CSS somewhere before the button CSS with

{%- include "PATH-TO-VARIABLES" -%}

...

a.btn.buttonBlack{
...
}

As for the actual module: Simply add a choice field with “Black” and “White” as values and write the module.html like this:

<a class="btn {{"button" ~ module.button_style }}" ...>...</a>

best,

Anton

[bearons]

Hi @Anton , hope you are well. I have given this a try but am not finding success.

I have gone ahead and created a ‘variants.css’ file that is populated with the example variables you have given. Seen below:

I also have a custom Module that I am working with. This is the module.html that I have tried:

Note that I changed the class names to ‘tab’ but they still use the same syntax & structure you provided in your examples.

I understand that HubL cannot be placed in .css files, at least module.css, so I assumed that you meant that your css code was going in a “require_css” block in the module.html file. Is this a correct assumption?

I have also attempted to import my variants.css file using the import statement you provided but Design Manager gives me a warning that this is not a proper use of the import statement. So, using my require_css method I am attemping to preview the object:

You can see here that the HubL in the CSS is not able to populate. It appears that it is not recognizing any of the variables being set in my variables.css file, so I assume the way I am importing that file is done incorrectly. Could you please help me understand exactly where you have placed each of the code snippets you provided in your module?

Note that when set the variables within the ‘require_css’ block, I am able to get it to work.

Thank you in advance for your help!

[jnix284]

@bearons I would also suggest similar to @Anton, that you have the choice in one module for black/white or light/dark scheme for the colors. Then you could have another module setting for layout, that has vertical/horizontal as the choices.

This would allow them to choose any combination all within the same module.

[bearons]

Thank you all for your replies! @Anton this is particularly helpful. I may have some follow-up questions but am giving this a go and will come back here once I am able to validate that this works.