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.
Large buttons
Buttons have in two sizes. The large version is 60px high. Remember to add the URL where the button should be linking 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.
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. Example: .fc-bg-primary
Find your best life at Fellowship Church
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.
Upcoming events
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.
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.
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.
Promo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
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.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
