Style Guide

Components & Shortcodes
Internal Reference
Modules
External Reference

Cards

Styles
Formats
In Use

Standard

Students

Thoughts & Prayers

Wendesdays | 4:30 PM
Registration: Open Childcare: Available Cost: $40
More Info Register
Students

Thoughts & Prayers

Wendesdays | 4:30 PM
Registration: Open Childcare: Available Cost: $40
More Info Register 
<div class="card h-100">
    <div class="card-img-header">
        <div><span class="position-absolute label label-event">Students</span></div>
        <img src="https://via.placeholder.com/491x180" alt="" class="card-img-top img-responsive">
    </div>
    <div class="card-body">
        <div class="mb-2">
            <h3 class="card-title">Thoughts &amp; Prayers</h3>
            <span class="d-block"><i class="fa fa-calendar text-info pr-2"></i> Wendesdays | 4:30 PM</span>
        </div>
        <div class="leading-loose">
            <span class="d-block">
                <span class="mr-4">Registration: <span class="text-success text-bold">Open</span></span>
                <span class="mr-4">Childcare: <span class="text-success text-bold">Available</span></span>
            </span>
            <span class="d-block">
                <span class="mr-4">Cost: <span class="text-info text-bold">$40</span></span>
            </span>
        </div>
    </div>
    <div class="card-footer">
        <a href="#" class="btn btn-sm btn-gray">More Info</a>
        <a href="#" class="btn btn-sm btn-action">Register</a>
    </div>
</div>

Shadow

Worship In-Person

Check in your child safely right here and we’ll take care of the rest

Worship In-Person 
<div class="row g">
    <div class="col-xs-12 col-md-6">
        <div class="card card-shadow h-100">
            <div class="card-img-header">
                <img src="https://via.placeholder.com/426x213" alt="" class="card-img-top img-responsive">
            </div>
            <div class="card-body">
                <h3 class="card-title">Worship In-Person</h3>
                <p>Check in your child safely right here and we’ll take care of the rest</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-sm btn-primary">Worship In-Person</a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6" style="height: 500px;"></div>
</div>

Gray

Worship In-Person

Check in your child safely right here and we’ll take care of the rest

Worship In-Person 
<div class="row g">
    <div class="col-xs-12 col-md-6">
        <div class="card card-muted h-100">
            <div class="card-img-header">
                <img src="https://via.placeholder.com/426x213" alt="" class="card-img-top img-responsive">
            </div>
            <div class="card-body">
                <h3 class="card-title">Worship In-Person</h3>
                <p>Check in your child safely right here and we’ll take care of the rest</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-sm btn-primary">Worship In-Person</a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6" style="height: 500px;"></div>
</div>

Large

Hello
<div class="card card-shadow card-lg">
    <div class="card-body">Hello</div>
</div>

Card Horizontal

Use card-footer my-auto to vertically center footer buttons with card-horizontal.

Worship In-Person

Check in your child safely right here and we’ll take care of the rest. Check in your child safely right here and we’ll take care of the rest. Check in your child safely right here and we’ll take care of the rest.

Worship In-Person M

Worship In-Person

Check in your child safely right here and we’ll take care of the rest. Check in your child safely right here and we’ll take care of the rest. Check in your child safely right here and we’ll take care of the rest.

Worship In-Person M 
<div class="row g g-4">
    <div class="col-xs-12">
        <div class="card card-horizontal">
            <div class="card-img-header">
                <img src="https://via.placeholder.com/426x213" alt="" class="card-img-top img-responsive">
            </div>
            <div class="card-body">
                <h3 class="card-title">Worship In-Person</h3>
                <p>Check in your child safely right here and we’ll take care of the rest. Check in your child safely right here and we’ll take care of the rest. Check in your child safely right here and we’ll take care of the rest.</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-sm btn-primary">Worship In-Person</a>
                <a href="#" class="btn btn-sm btn-gray">M</a>
            </div>
        </div>
    </div>

    <div class="col-xs-12">
        <div class="card card-horizontal">
            <div class="card-img-header">
                <img src="https://via.placeholder.com/426x213" alt="" class="card-img-top img-responsive">
            </div>
            <div class="card-body">
                <h3 class="card-title">Worship In-Person</h3>
                <p>Check in your child safely right here and we’ll take care of the rest. Check in your child safely right here and we’ll take care of the rest. Check in your child safely right here and we’ll take care of the rest.</p>
            </div>
            <div class="card-footer my-auto">
                <a href="#" class="btn btn-sm btn-primary">Worship In-Person</a>
                <a href="#" class="btn btn-sm btn-gray">M</a>
            </div>
        </div>
    </div>
</div>

Event Feature

Upcoming Events

Students

Students Bible Study

Wednesdays | 4:30 PM
More Info
More Info Register
Institute

Romans - Part 1 (Women’s)

Tuesdays | 4:30PM
More Info
More Info Register
Connections

First Steps

Sunday, Nov 7 | 1 PM
More Info
More Info Register 
<h3>Upcoming Events</h3>
<div class="row d-flex flex-wrap g-3">
    
        <div class="col-xs-12 col-sm-6 col-lg-4">
            <div class="card card-shadow">
                <div class="card-img-header">
                    <div><span class="position-absolute label label-event">Students</span></div>
                    <img src="https://via.placeholder.com/616x360" alt="" class="card-img-top img-responsive">
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <h3 class="card-title">Students Bible Study</h3>
                        <span class="d-block font-weight-semibold"><i class="fa fa-calendar text-info pr-2"></i> Wednesdays | 4:30 PM</span>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="d-none d-lg-block">
                        <a href="#" class="btn btn-sm btn-action stretched-link">More Info</a>
                    </div>

                    <div class="d-flex d-lg-none">
                        <a href="#" class="btn btn-sm btn-gray">More Info</a>
                        <a href="#" class="btn btn-sm btn-action">Register</a>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="col-xs-12 col-sm-6 col-lg-4">
            <div class="card card-shadow">
                <div class="card-img-header">
                    <div><span class="position-absolute label label-event">Institute</span></div>
                    <img src="https://via.placeholder.com/616x360" alt="" class="card-img-top img-responsive">
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <h3 class="card-title">Romans - Part 1 (Women’s)</h3>
                        <span class="d-block font-weight-semibold"><i class="fa fa-calendar text-info pr-2"></i> Tuesdays | 4:30PM</span>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="d-none d-lg-block">
                        <a href="#" class="btn btn-sm btn-action stretched-link">More Info</a>
                    </div>

                    <div class="d-flex d-lg-none">
                        <a href="#" class="btn btn-sm btn-gray">More Info</a>
                        <a href="#" class="btn btn-sm btn-action">Register</a>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="col-xs-12 col-sm-6 col-lg-4">
            <div class="card card-shadow">
                <div class="card-img-header">
                    <div><span class="position-absolute label label-event">Connections</span></div>
                    <img src="https://via.placeholder.com/616x360" alt="" class="card-img-top img-responsive">
                </div>
                <div class="card-body">
                    <div class="mb-2">
                        <h3 class="card-title">First Steps</h3>
                        <span class="d-block font-weight-semibold"><i class="fa fa-calendar text-info pr-2"></i> Sunday, Nov 7 | 1 PM</span>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="d-none d-lg-block">
                        <a href="#" class="btn btn-sm btn-action stretched-link">More Info</a>
                    </div>

                    <div class="d-flex d-lg-none">
                        <a href="#" class="btn btn-sm btn-gray">More Info</a>
                        <a href="#" class="btn btn-sm btn-action">Register</a>
                    </div>
                </div>
            </div>
        </div>
    
</div>