This is a paragraph element. We have some placeholder text here to show what a paragraph looks like.
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.
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).
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.
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.
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 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
Use these when you have multiple sets of content to display with images.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Here we are defining extra styles like the max-width of our container element, our padding for each breakpoint, and the border radius which we're utilizing.
Keeping these styles consistent in your design is an easy way to keep your site looking professional and responsive across break points. As you define the styles on each breakpoint, update the values below.
Surfaces are used to emulate real-world depth at various levels of elevation where a light source is casting a shadow from the surface onto the layer below it. The higher the elevation value, the more diffused the shadow becomes and we have 8 levels to choose from.
surface-L1
surface-L2
surface-L3
surface-L4
surface-L5
surfaceL-6
surface-L7
surface-L8
Unordered and ordered lists
#444444
A starter set of SVG icons in 16 and 24px sizes.
Starting with four image aspect ratios of landscape, portrait, square and avatar. These images have been placed inside parent DIVs that keep their aspect ratios when the page is resized. There's also a banner version that uses a background image that's been set to "Cover".
image-landscape-banner with a background image set to "Cover" in 100% wrapper
image-landscape in 100% wrapper
image-portrait in css grid column 1
image-square in css grid column 2
image-avatar in 40px wrapper