Does anyone know if these tab objects can be done in Hubspot
Tab Object
These types of tabbed interfaces can be created in HubSot. While there is not a native module for tabbed content, you can create a custom module to accomplish this. If you’re using the new design manager (currently in beta) you can create a more efficient custom module with this using repeater fields.
You can create tabs like this using either a JS plugin already out there or with CSS only (Functional CSS Tabs Revisited | CSS-Tricks).
Thanks AJ. Lets pretend I am not a web designer. so to use the script on the reference page, I would add say a flex column and paste the text into the CSS Declarations??
give me a bit more and i think I can do this
Ideally, yes. You should be able to copy the HTML from the HTML Structure portion (Functional CSS Tabs Revisited | CSS-Tricks) and paste that into an HTML Module (or into the view source view of the Rich Text editor. This is found by clicking the </> button on the menubar). Then you should be able to copy the CSS from the CSS Layout potrion (Functional CSS Tabs Revisited | CSS-Tricks) and then you should see similar to what they have in their demo here: Pure CSS Tabbed Areas
You may need to tweak your CSS a bit as the CSS they use for this:
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
is targeting all radio buttons so it could conflict with existing forms that have radio buttons.
Likewise, if you are using classes on elements with the same name as those in their CSS this could also cause conflicting issues.
I hope this helps to clarify this a bit for you.
-AJ
