Components
Components include things like your navbar, forms and your footer. These are made out of symbol elements because when you update it one place, it updates it across the site for consistency and easy maintenance.
Navbar
The Navbar symbol below can be placed on any page. If you update it in one instance (like below), it will update across the entire website.
It's common to have multiple different navbars. It's also common to move sub-elements outside of the container and removing the container from navbars. If you do this, make sure to add padding on the left and right hand side of the navbar.
Navbars are typically not inside of a container, they usually site inside of a section or above sections. Add the fixed class to it to make the navbar in the fixed position (this will place it at the top of the page and the navbar will stay on the page while you're scrolling).
Width: 100%
Container max-width: 1200px
Padding top and bottom: 0px
Padding left and right: 0px
Icon from flaticon ➞
Forms
Forms are a critical component on any website, they help your customers and audience to contact your team. It's important to retain form field labels to make your forms accessible.
Width: 100%
Contact form
Place this anywhere on the website that you'd like your customers to be able to contact you. A common area to place these is inside of footers or in content sections after you've had some sort of call to action.
Sign-up form
Place this anywhere on the website that you'd like your customers to sign-up to subscribe for something. It's common to connect these to MailChimp.
Tabs
You can use the tabs element to share tabulated content. These elements are helpful for when you have a lot of content to share with similar hierarchy.
To use the tabs element copy the symbol and paste it. Or use the CMD + K or CTRL + K keyboard shortcut to add in a Tabs symbol.
Once a Tabs symbol is added to your site, press CMD + SHIFT + A to disconnect it from the symbol parent. On Windows, press CTRL + SHIFT + A.
You can add more tabs by selecting a tab, and using the Copy and Paste function via right click or by pressing CMD + C and CMD + V on Mac, or CTRL + C and CTRL + V on Windows.
To navigate to a different tab, press "D" on your keyboard to open settings on the right hand side. Within there, you can select a tab pane and then add content to that tab pane.
This is a heading inside of a tab
This is the content inside of the first tab, you can place anything inside of a tab
This is the content inside of your second tab, you can place anything inside of a tab
This is the content inside of your third tab, you can place anything inside of a tab
This is the content inside of your third tab, you can place anything inside of a tab
Cards
Use these when you have multiple sets of content to display with images.
Card one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Card two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Card three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.