Components

Accordion

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.

Accordion item details can be BOLDED, italicized, linked and more below:

Left aligned

Right aligned

Center aligned

and you can have a list that is:

  • bulleted or
  1. numbered

Accordion item details can be BOLDED, italicized, linked and more below:

Left aligned

Right aligned

Center aligned

and you can have a list that is:

  • bulleted or
  1. numbered

Button

There are multiple styles for our button component and should be selected based on the background.

Animation

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
Independent-Health-Logo.svg

Image

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.

Independent-Health-Logo.svg

Business Card

This component was designed for employee's headshots and job information. It should be used for contact information.

Calendar Event

This component has built in sections like date, time, and location so that you can fill it out with ease.

Event Title

Here is the description for the event happening.

Dates:  Dates go here

Times:  Times go here

Location:  Location go here

Return to Top

Carousel

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.

Column Container

This component allows you to split a larger dropzone into multiple smaller dropzones. All options are shown below.

2 Columns

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

3 Columns

Column 1

Column 2

Column 3

4 Columns

Column 1

Column 2

Column 3

Column 4

6 Columns

Column 1

Column 2

Column 3

Column 4

Column 5

Column 6

Filler

This component gives users the option to add padding between components.

There is a filler above the is 20px tall.

Modal

This component allow a modal to open on a button click. 

Embed

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
    • https://www.youtube.com/embed/27Nu0QxoOFQ
  • 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.

Hero Banner

This component allows you to place an image what will stretch the width of the page. The recommended dimensions for this component is 1920x390. Anything larger may risk getting cut off at the top, bottom, or edges. This component can only work in the full width dropzone like this.

important-alert The notification banner component allows text to appear as alerts. You can also set a start and end date. Button
important-alert The notification banner can also be set as an informational alert with this blue background. Button

Numbered Text

This component autogenerates the numbered circles based on how many descriptions added.

Heading

  • 1

    Descriptions for item 1

  • 2

    Descriptions for item 2

  • 3

    Descriptions for item 3

Social Icons

Add social icons and their links to Facebook, Twitter, and Instagram. You can add up to 6 icons.

Tabbed Navigation

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

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 description can be BOLDEDitalicizedlinked and more below:

Left aligned

Right aligned

Center aligned

and you can have a list that is:

  • bulleted or
  1. numbered

Tab 2 description can be BOLDEDitalicizedlinked and more below:

Left aligned

Right aligned

Center aligned

and you can have a list that is:

  • bulleted or
  1. numbered

Text

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:

Left aligned

Right aligned

Center aligned

and you can have a list that is:

  • bulleted or
  1. numbered

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

Quick Links

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.

Separator

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.

Title

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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Table

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.

Column 1
Column 2
Column 3

Data 1:1

Data 1:2

Data 1:3

Data 2:1

Data 2:2

Data 2:3

Teaser

This component is very versitile can display content a mulitude of different ways.

Horizontal Layout

Horizontal Layout

Desciptive text for the teaser component.

Vertical Layout

Vertical Layout

Desciptive text for the teaser component.

Reverse Horizontal Layout

Reverse Horizontal Layout

Desciptive text for the teaser component.

White Card Layout

White Card Layout

Desciptive text for the teaser component.

Flip Card Layout

Flip Card Layout

Desciptive text for the teaser component.

Flip Card Layout

Flip Card Layout

Desciptive text for the teaser component.

Thumbnail Layout

Thumbnail Layout

Desciptive text for the teaser component.