Louisville Seminary Style Guide B

Website supplementary style guide and reference for pages with this appearance style. Page title, headings, and lead text have different styles applied using *--B classes. Most other page elements keep with the main style guide.

Pages Using These Styles

The following is a complete or mostly-complete list as of this writing.

Style Differences

Almost nothing on these pages has horizontal centering.

Page Banner

Modify your page banner to use the .lpts-hero and, more importantly, .lpts-hero--no-bottom-margin CSS classes.

{{ container.bg("/assets/img/5161918682_d81b4b4a7b_b.jpg", content, title,
                     "parallax-half lpts-hero lpts-hero--no-bottom-margin") }}

Page Title and Lead Text

On special pages like this, your first section containing the page title and lead text must appear outside of a grid container. (At least for the time being.)

<!-- <article class="article"> -->
<section class="section">
    <div class="bg-blue text-white">
        <div class="container">
            <h1 class="h1--B page-title text-center">
                Ways to Give
            </h1>
        </div>
    </div>
    <div class="container">
        <p class="lead lead--B text-center">
            When you give to Louisville Seminary, your
            impact reaches far beyond its walls.
        </p>
    </div>
</section>

After the page title/lead text section, other sections will normally be inside a grid container, following the pattern:

<div class="container">
    <section class="section">
        <h2 class="h2--B">...</h2>
        <p>Lorem ipsum dolor...</p>
        <h3 class="h3--B">...</h3>
        ...
    </section>
    <section class="section">
        <h2 class="h2--B">...</h2>
        <p>Lorem ipsum dolor...</p>
        <h3 class="h3--B">...</h3>
        ...
    </section>
    ...
</div>
<!-- </article> -->

Page Title and Lead Text on Stories Without a Page Banner

Remove the <div class="bg-blue text-white"> opening tag and its corresponding closing tag, but keep that element's contents.
Apply the text-black CSS class to the lead paragraph.
Merge the two <div class="container"> elements into one.

Donor Recognition

All that Louisville Seminary is today has been made possible by the devotion and faith-filled support of those who have come before us. We honor their generosity through the Caldwell Society for legacy donors, the President’s Circle for leadership giving, and the Seminary Sustainer and Louisville Loyal designations.

<section class="section">
    <div class="container">
        <h1 class="h1--B page-title text-center">
            Donor Recognition
        </h1>
        <p class="lead lead--B text-center text-black">
            All that Louisville Seminary is today has been
            made possible by the devotion and faith-filled
            support of those who have come before us. We
            honor their generosity through the Caldwell
            Society for legacy donors, the President’s
            Circle for leadership giving, and the Seminary
            Sustainer and Louisville Loyal designations.
        </p>
    </div>
</section>

Typography

Heading and Body Text Styles

Styles for h4, h5, and h6 are in flux.

Text Style	Font Size	Font Weight	Text Transform	Color
Heading 1	22px	bold	none	blue (PMS 2945 U, #29588c)
Heading 2	18px	bold	uppercase	blue
Heading 3	16px	bold	none	blue
Heading 4	16px	bold	none	blue
Heading 5	16px	bold	none	blue
Heading 6	16px	bold	none	blue
Paragraph (regular body text)	16px	normal	none	dark gray (#101010)