Buttons

Small buttons

Buttons have in two sizes. The small version is 50px high. Remember to add the URL where the button should point to. We use the arrow to the right when it's linked to a related page, and arrow going top-right for links that go to other sections or open in a new tab.

Button

Primary Buttons

Button

Secondary Buttons

Button

Tertiary Buttons

Learn more

Text-Only Button FOR INTERNAL LINKS

Learn more

Text-Only Button FOR EXTERNAL LINKS

This is a button

Rounded transparent buttons

Extra buttons

Used for videos in different pages.

Play Video

Play Buttons

Calls-to-action

Ribbon

This CTA is used full-width. Copy and paste this component and it will go 100% of your width. You can use the different background combo-classes to have different background colors.

Insert text here.

Alert

This CTA is used full-width. Copy and paste this component and it will go 100% of your width. You can use the different background combo-classes to have different background colors.

Insert Text Here. Make sure to use the override field.

Banner

This CTA is 94% of the container and has a max with of 1380px. Copy and paste this component and it will go 94% of your width. You can use the different background combo-classes to have different background colors. Example: .fc-bg-primary

Banner w/ Image

This CTA is 94% of the container and has a max with of 1380px and includes a backgrounbd image. Copy and paste this component and it will go 94% of your width. You can use the different background combo-classes to have different background colors.

Cards

Full width card

Cards are now done using the auto-grid feature. Whenever a new card is added, you can set it up wherever you want.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Normal Card

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

White Background Card

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Dark Background Card