Style Guide

Components & Shortcodes
Internal Reference
Modules
External Reference

Buttons CTAs

Table of Contents

Button Positions

Headsup!

CTA's should be placed inside a flexbox row i.e. .row.g, since buttons will have a width and height of 100%.
<div class="row g g-4">
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-outline-primary">Top (Default)</button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-cta-center btn-outline-primary">Center</button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-cta-bottom btn-outline-primary">Bottom</button></div>
</div>

CTA Outline

Headsup!

CTA's should be placed inside a flexbox row i.e. .row.g, since buttons will have a width and height of 100%.




<div class="row g g-4">
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-outline-primary">Mission & Vision</button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-outline-primary">Our Beliefs</button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-outline-primary">Staff, Elders &amp; Deacons</button></div>
</div>

<br><br>

<button type="button" class="btn btn-cta btn-outline-primary">Mission & Vision</button>

<br><br>

<div class="row g g-4">
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-outline-primary">Mission & Vision <span class="microcopy">The Village is one local body in Flower Mound, TX</span></button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-outline-primary">Our Beliefs <span class="microcopy">We live on mission, making disciples of Jesus Christ.</span></button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-outline-primary">Staff, Elders &amp; Deacons <span class="microcopy">Are you skeptical of Christianity? Let’s talk.</span></button></div>
</div>

CTA Outline

Headsup!

CTA's should be placed inside a flexbox row i.e. .row.g, since buttons will have a width and height of 100%.




<div class="row g g-4">
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-primary">Mission & Vision</button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-primary">Our Beliefs</button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-primary">Staff, Elders &amp; Deacons</button></div>
</div>

<br><br>

<button type="button" class="btn btn-cta btn-primary">Mission & Vision</button>

<br><br>

<div class="row g g-4">
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-primary">Mission & Vision <span class="microcopy">The Village is one local body in Flower Mound, TX</span></button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-primary">Our Beliefs <span class="microcopy">We live on mission, making disciples of Jesus Christ.</span></button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-primary">Staff, Elders &amp; Deacons <span class="microcopy">Are you skeptical of Christianity? Let’s talk.</span></button></div>
</div>

CTA Gray (Bottom)

Headsup!

CTA's should be placed inside a flexbox row i.e. .row.g, since buttons will have a width and height of 100%.
<div class="row g g-4">
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-cta-bottom btn-gray">Give Now <span class="microcopy">A place for giving microcopy can go here</span></button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-cta-bottom btn-gray">My Giving Profile <span class="microcopy">A place for giving microcopy can go here</span></button></div>
    <div class="col-md-4 col-xs-12"><button type="button" class="btn btn-cta btn-cta-bottom btn-gray">Got Questions? <span class="microcopy">A place for giving microcopy can go here</span></button></div>
</div>