If you click on the titles below you will see the details below the title expand and collapse. This component is very useful on "Frequently Asked Questions" sections.
There are multiple styles for our button component and should be selected based on the background.
When you came to this page you may have seen some components moving, if you did not, feel free to refresh the page to see the animations replay. We have 2 component options to make these animations.
- Animated Container
- Animated Image
We can make items animate in 1 of 4 ways:
- Slide Right (used on this component)
- Slide Left (used on the image below)
- Slide Top
- Slide Bottom
The image component is pretty straightforward. You can use any image in the digital asset manager and you can also apply a link to the image as well.
Also known as a slider, the carousel rotates through different content. Currently we can use the Teaser component (first slide) and Hero banner (second slide) to "style" our content.
- Hero Banner
This component allows you to split a larger dropzone into multiple smaller dropzones. All options are shown below.
This component gives users the option to add padding between components.
There is a filler above the is 20px tall.
This component allow a modal to open on a button click.
Want videos on your webpages? Use this component to embed YouTube or Vimeo videos. Below are a few tips:
- Only paste the end of your Youtube/Vimeo embed URL in the URL field
- If you want the video to be responsive fill in the height field, but leave the width field empty and the video width will automatically take on the size of the container it is in.
This component autogenerates the numbered circles based on how many descriptions added.
Descriptions for item 1
Descriptions for item 2
Descriptions for item 3
Add social icons and their links to Facebook, Twitter, and Instagram. You can add up to 6 icons.
Add icons, titles, and links as an alternative navigation or more visual way to display links. The icons are pulled from Font Awesome so you will need to find an icon you link on their site and copy to code from their HTML code.
- Their code is: <i class="fab fa-accessible-icon"></i>
- You need: fab fa-accessible-icon
Tabs are a great way to organize content and keep pages short. Users will be able to tab through the different categories of content.
- Tab 1
- Tab 2
The text component is a part of a lot of the other components and functions like a Microsoft Word document can be BOLDED, italicized linked and more below:
and you can have a list that is:
- bulleted or
This component also allows you to stylize the text, you can chane the heading styles and change the color of the text to white or dark grey.
Heading 2 - Grey
Heading 2 - White
This component allows you to add multiple links with horizontal lines inbetween each one. This component is used in the footer, but is also a great way to display on any page with a list of links. There are different options for the styles too.
This component creates a horizontal line on the page. You can change the color of the line, as well as change the width of the line to full width. Best used to separate content on the page. Below we have a white separator, a light grey, a medium grey, and a dark grey. The dark grey separator is the full width option and the other separators are the default options.
The title component allows you to apply heading styles to text. Headings should be used to establish heiarchy on the page, making it easier for users to scan the page content.
Add tables to your webpage to help users compare data. Do not use the table component for display purposes only, should only be used for data entry.
This component is very versitile can display content a mulitude of different ways.