Web Style Guide
Gloria Dei Lutheran | four
Login Sunday Bulletin Give

Typography & Colors

Table of Contents
  1. Standard Cards
  2. Same Height Cards
  3. Minimal Cards
  4. Short Cards
  5. Horizontal Cards
  6. Fancy Cards
  7. Mini Media Cards
  8. Poster Cards
  9. Icon Cards
  10. Overlay Cards
  11. Side By Side Cards

Standard Cards

Notice the .no-hover class on the second card. This theme implements a hover effect on most card styles which can be easily removed by adding this class to any card element.
Image Aspect Ratio: 16 / 9
Recommended Size: 800px x 450px
alt
title

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Learn More
alt
No Hover

append the .no-hover class to any card to remove the hover animation

Learn More 



<div class="row">
    <div class="col-xs-12 col-sm-6 mb-4 mb-sm-0">
        <div class="card">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
            </div>
            <div class="card-footer">
                <a href="#">Learn More</a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 mb-4 mb-sm-0">
        <div class="card no-hover">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">No Hover</h5>
                <p>append the <code>.no-hover</code> class to any card to remove the hover animation</p>
            </div>
            <div class="card-footer">
                <a href="#">Learn More</a>
            </div>
        </div>
    </div>
</div>

Same Height Standard Cards + Colors

The GloriaDeiV1 theme has many theme color options. Simply add the color name in css class syntax (Misty Moss => misty-moss) to the card element to apply the color as this card's background color. The default background is white (#fff)

alt
title

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Learn More
alt
title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae corrupti sed amet qui fuga architecto reprehenderit distinctio tenetur! Similique, facilis!

Learn More
alt
roman-silver
alt
isabelline



<div class="row d-flex flex-wrap">
    <div class="col-xs-12 col-sm-6 mb-4">
        <div class="card h-100">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
            </div>
            <div class="card-footer">
                <a href="#">Learn More</a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 mb-4">
        <div class="card h-100">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">title</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae corrupti sed amet qui fuga architecto reprehenderit distinctio tenetur! Similique, facilis!</p>
            </div>
            <div class="card-footer">
                <a href="#">Learn More</a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 mb-4">
        <div class="card roman-silver h-100">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">roman-silver</h5>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 mb-4">
        <div class="card isabelline h-100">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h5 class="card-title">isabelline</h5>
            </div>
        </div>
    </div>
</div>

Minimal Cards

Image Aspect Ratio: 1 / 1
Recommended Size: 800px x 800px

The GloriaDeiV1 theme has many theme color options. Simply add the color name in css class syntax (Misty Moss => misty-moss) to the card element to apply the color as this card's footer background color. The default footer background is Misty Moss (#86A199)

alt
Default
alt
Nickel
alt
Roman Silver 



<div class="row d-flex flex-wrap">
    <div class="col-xs-12 col-sm-6 col-lg-4 mb-4">
        <div class="card card-minimal">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-footer">
                <a href="#">Default</a>
            </div>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 mb-4">
        <div class="card card-minimal nickel">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-footer">
                <a href="#">Nickel</a>
            </div>
        </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 mb-4">
        <div class="card card-minimal spirit-silk-light">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-footer">
                <a href="#">Roman Silver</a>
            </div>
        </div>
    </div>
</div>

Short Cards

Image Aspect Ratio: 21 / 10
Recommended Size: 800px x 380px
alt
title

From October 25 to November 2, 2024

alt
title

From October 25 to November 2, 2024

alt
title

From October 25 to November 2, 2024

alt
title

From October 25 to November 2, 2024




<div class="row d-flex flex-wrap">
    <div class="col-xs-12 col-sm-6 mb-4">
        <div class="card card-short">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h6 class="card-title">title</h6>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 mb-4">
        <div class="card card-short early-fawn">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h6 class="card-title">title</h6>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 mb-4">
        <div class="card card-short soft-nickel">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h6 class="card-title">title</h6>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 mb-4">
        <div class="card card-short smoky-emerald">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h6 class="card-title">title</h6>
                <p>From October 25 to November 2, 2024</p>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    </div>
</div>

Horizontal Cards

Image Aspect Ratio: 16 / 9
Recommended Size: 800px x 450px
alt

Recurring Event

Men's Bible Study

Monday July, 15 2024 at 8:30pm

See Event
alt

isabelline

See Event
alt

nickel

See Event 



<div class="card card-horizontal mb-3">
    <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
    <div class="card-body">
        <div class="card-content">
            <p class="small m-0 text-primary text-normal"><i class="fa fa-repeat"></i> Recurring Event</p>
            <h3 class="card-title">Men's Bible Study</h3>
            <p>Monday July, 15 2024 at 8:30pm</p>
        </div>

        <div class="card-footer">
            <a href="#" class="btn btn-sm btn-primary btn-icon d-none d-sm-inline-flex active" title="Registration Required"><i class="fa fa-clipboard-list"></i></a>
            <a href="#" class="btn btn-sm btn-default btn-icon" title="Follow Event"><i class="fa fa-star"></i></a>
            <a href="#" class="btn btn-sm btn-default btn-icon d-none d-sm-inline-flex" title="Share Event"><i class="fa fa-share"></i></a>
            <a href="#" class="btn btn-sm btn-default">See Event</a>
        </div>
    </div>
</div>


<div class="card card-horizontal mb-3 isabelline">
    <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
    <div class="card-body">
        <div class="card-content">
            <h3 class="card-title m-0">isabelline</h3>
        </div>

        <div class="card-footer">
            <a href="#" class="btn btn-sm btn-default">See Event</a>
        </div>
    </div>
</div>


<div class="card card-horizontal mb-3 nickel">
    <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
    <div class="card-body">
        <div class="card-content">
            <h3 class="card-title m-0">nickel</h3>
        </div>

        <div class="card-footer">
            <a href="#" class="btn btn-sm btn-outline-light btn-icon"><i class="fa fa-star"></i></a>
            <a href="#" class="btn btn-sm btn-outline-light">See Event</a>
        </div>
    </div>
</div>

Fancy Cards

Image Aspect Ratio: 5 / 9
Recommended Size: 800px x 1440px
alt

Worship

Default

at 8:30am

Learn More
alt

Worship

Nickel

at 8:30am

Learn More
alt

Worship

Isabelline

at 8:30am

Learn More 



<div class="row d-flex flex-wrap">
    <div class="col-xs-12 col-sm-6 col-lg-4 mb-4">
        <div class="card card-fancy">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <p>Worship</p>
                <h3 class="card-title">Default</h3>
                <p>at 8:30am</p>
            </div>
            <div class="card-footer">
                <a href="#">Learn More</a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4 mb-4">
        <div class="card card-fancy nickel">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <p>Worship</p>
                <h3 class="card-title">Nickel</h3>
                <p>at 8:30am</p>
            </div>
            <div class="card-footer">
                <a href="#">Learn More</a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4 mb-4">
        <div class="card card-fancy isabelline">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <p>Worship</p>
                <h3 class="card-title">Isabelline</h3>
                <p>at 8:30am</p>
            </div>
            <div class="card-footer">
                <a href="#">Learn More</a>
            </div>
        </div>
    </div>
</div>

Mini Media Cards

Image Aspect Ratio: 1 / 1
Recommended Size: 280px x 280px
alt

Traditional

at 8:30am

Learn More 



<div class="row d-flex flex-wrap">
    <div class="col-xs-12 col-sm-6 mb-4">
        <div class="card card-mini-media">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h3 class="card-title">Traditional</h3>
                <p>at 8:30am</p>
            </div>
            <div class="card-footer">
                <a href="#">Learn More</a>
            </div>
        </div>
    </div>
</div>

Poster Cards

No Image

Isabelline

God has an incredible purpose for your life, and the Gloria Dei Way help you fulfill that purpose!

Get Started

No Image

Isabelline

God has an incredible purpose for your life.

Get Started
alt

With Image

Nickel

Get Started 



<div class="row d-flex flex-wrap">
    <div class="col-xs-12 col-sm-6 mb-sm-4">
        <div class="card card-poster h-100">
            <div class="card-body">
                <p class="text-sandstone">No Image</p>
                <h3 class="card-title">Isabelline</h3>
                <p>God has an incredible purpose for your life, and the Gloria Dei Way help you fulfill that purpose!</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-light no-grow">Get Started</a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 mb-sm-4">
        <div class="card card-poster isabelline h-100">
            <div class="card-body">
                <p class="text-misty-moss">No Image</p>
                <h3 class="card-title">Isabelline</h3>
                <p>God has an incredible purpose for your life.</p>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-light no-grow">Get Started</a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 mb-sm-4">
        <div class="card card-poster nickel h-100">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <p class="text-sandstone">With Image</p>
                <h3 class="card-title">Nickel</h3>
            </div>
            <div class="card-footer">
                <a href="#" class="btn btn-light no-grow">Get Started</a>
            </div>
        </div>
    </div>
</div>

Icon Cards

Serving
My Teams Join a Team
Nickel + SVG
My Teams Join a Team
Isabelline
My Teams Join a Team 



<div class="row d-flex flex-wrap">
    <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6 mb-sm-3">
        <div class="card card-icon">
            <div class="icon"><i class="fa fa-box"></i></div>
            <div class="card-body">
                <h6 class="card-title mb-1">Serving</h6>
                <div class="card-footer">
                    <a href="#"><b>My Teams</b></a>
                    <a href="#">Join a Team</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6 mb-sm-3">
        <div class="card card-icon nickel">
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                    <path d="M160 32c0-17.7 14.3-32 32-32l32 0c17.7 0 32 14.3 32 32c17.7 0 32 14.3 32 32l0 224c0 17.7-14.3 32-32 32c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32c-17.7 0-32-14.3-32-32l0-224c0-17.7 14.3-32 32-32zM32 448l288 0c70.7 0 128-57.3 128-128s-57.3-128-128-128l0-64c106 0 192 86 192 192c0 49.2-18.5 94-48.9 128l16.9 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-160 0L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32zm80-64l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
                </svg>
            </div>
            <div class="card-body">
                <h6 class="card-title mb-1">Nickel + SVG</h6>
                <div class="card-footer">
                    <a href="#"><b>My Teams</b></a>
                    <a href="#">Join a Team</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6 mb-sm-3">
        <div class="card card-icon isabelline">
            <div class="icon"><i class="fa fa-users"></i></div>
            <div class="card-body">
                <h6 class="card-title mb-1">Isabelline</h6>
                <div class="card-footer">
                    <a href="#"><b>My Teams</b></a>
                    <a href="#">Join a Team</a>
                </div>
            </div>
        </div>
    </div>
</div>

Overlay Cards

Image Aspect Ratio: 16 / 9
Recommended Size: 800px x 450px
alt

Adults

alt

Nickel

alt

Isabelline




<div class="row d-flex flex-wrap">
    <div class="col-xs-12 col-sm-6 col-lg-4 mb-3">
        <div class="card card-overlay">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h2 class="card-title"><b>Adults</b></h2>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4 mb-3">
        <div class="card card-overlay nickel">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h2 class="card-title"><b>Nickel</b></h2>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-4 mb-3">
        <div class="card card-overlay isabelline">
            <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
            <div class="card-body">
                <h2 class="card-title"><b>Isabelline</b></h2>
            </div>
            <div class="card-footer">
                <a href="#"></a>
            </div>
        </div>
    </div>
</div>

Side By Side Cards

Image Aspect Ratio: 16 / 9
Recommended Size: 800px x 450px
alt
title

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Learn More
alt
No Hover

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Learn More 



<div class="card card-side-by-side mb-4">
    <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
    <div class="card-body">
        <h5 class="card-title">title</h5>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    </div>
    <div class="card-footer">
        <a href="#" class="btn btn-primary">Learn More</a>
    </div>
</div>
<div class="card card-side-by-side smoky-emerald">
    <img src="/Themes/GloriaDeiV1/Assets/Images/GD-placeholder.png" alt="alt" class="card-img-top img-responsive">
    <div class="card-body">
        <h5 class="card-title">No Hover</h5>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    </div>
    <div class="card-footer">
        <a href="#" class="btn btn-light">Learn More</a>
    </div>
</div>