COMPONENTS
Tables
Tables are used on white background only. This component can be found in our component library, in the admin panel.
H5 HEADER |
H5 HEADER |
|
| Row Header | Lorem ipsum dolor sit amet. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor |
| Row Header | Lorem ipsum dolor sit amet. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor |
| Row Header | Lorem ipsum doldgr sit amet. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor |
H5 HEADER |
H5 HEADER |
Lorem ipsum dolor sit amet. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor |
Lorem ipsum dolor sit amet. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor |
Lorem ipsum doldgr sit amet. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor |
Tabs
Tabs are used on white background only. This component and instructions can be found in our component library, in the admin panel.
Tab One Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur:
Tab Two Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab Three Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accordions
Accordions are used on white background only. This component can be found in our component library, in the admin panel.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.
Call to Action (CTAs)
CTAs are the same for light and dark backgrounds. If you need an adjusted design, please consult your Creative Director for guidance.
h2 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod sed do eiusmod.
h2 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod sed do eiusmod.
h2 Header
h2 Header
h2 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod sed do eiusmod.
h2 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod sed do eiusmod.
h2 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod sed do eiusmod.
h2 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod sed do eiusmod.
Cards
Cards are primarily used on white background. This component and instructions can be found in our component library, in the admin panel.
H2 HEADER
Basic card with icon, H2 header, and text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Basic card with icon, header, text, and Hubspot Button. Lorem ipsum dolor sit amet, consecteturg elit.
Card with icon and text.
Green, top border.
Just add the class "card-border" to any card's outer "div".
H3 HEADER
Card with icon, H3 header, and text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H3 Header
Basic card with icon, header, text, and Hubspot Button. Lorem ipsum dolor sit amet, consecteturg elit.
Buttons On Dark
Here are our buttons for use on dark backgrounds. These components can be found in our component library, in the admin panel.
Seashell Cream full color background with Creature Gray text. White background on hover.
Seashell Cream outline and text. White outline and text on hover.
Form Elements
Here is a demo of our submission forms. Our forms are created in Hubspot and styled to fit our demo here. Please generate the form <code> in Hubspot and place the code inside a code module.
Please use the components as outlined above to consistently structure our content.
For more guidance and approval, please contact our Creative Director.