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.

Primary Buttons
Secondary Buttons
Tertiary Buttons
Text-Only Button FOR INTERNAL LINKS
Text-Only Button FOR EXTERNAL LINKS
Rounded transparent buttons

Extra buttons

Used for videos in different pages.

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.

Insert text here.

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.

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

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

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

Title Goes Here

Description Goes Here

Link Text Goes Here
Title Goes Here

Description Goes Here

Link Text Goes Here

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.

Banner w/ Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text
Banner w/ Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Learn more

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.

Normal Card
White Background Card
Dark Background Card
Sermon card
Event card
INFORMATIONAL CARD

Heading

Learn more

Heading

Learn more

Heading

Learn more
Chiclet

Tile Title

Tile Description

Link Text Goes Here

Tile Title

Tile Description

Link Text Goes Here

Tile Title

Tile Description

Link Text Goes Here
INFORMATIONAL Tile

Layouts

Hero

Hero is used full-width. Copy and paste this component and it will go 100% of your width. Change the background image using combo class.

Hero

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Learn more

Promo

Promo is a two column grid with 12px grid-gap and 12px of padding on all sides.

Promo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Learn more

Promo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Learn more

Alternating Content

Alternating Content is a two column grid with 12px grid-gap and 0px column-gap and 12px of padding on all sides.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Learn more

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Learn more