Indigo Design System v1.0.0

Long Form Text

Long form text is used for columns of copy meant for reading, such as an article, a press release, instructions, or other descriptive material.

Overview

Building on Indigo’s typographic base, long form text applies vertical spacing to optimize readability and scanability of long blocks of prose.

These long form text guidelines are designed to ensure consistency across all USAC products.

Design and Implementation

To use the long form text component, enclose simple HTML tags – <h1>, <h2>, <h3>, <h4>, <h5>, <p>, <ul>, <ol>, img and <a> – within an enclosing block with class="indi-long-form-text". Avoid including other Indigo components within the same context, instead starting and stopping each block to include just the long form text.

CLASS INCLUDES OUTCOME
.indi-long-form-text h1 color: #006FF4
font-family: 'Source Sans Pro', sans-serif
font-size: 56px
font-weight: 300
line-height: 64px

H1 (page title)

Page Titles are never clickable, but they are the one exception where the color is always blue #004AD4

.indi-long-form-text h2 color: #616161
font-family: 'Source Sans Pro', sans-serif
font-size: 40px
font-weight: 600
line-height: 42px

H2 (level 2)

H2 (level 2 link)

.indi-long-form-text h3 color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 32px
font-weight: 400
line-height: 38px

H3 (level 3)

H3 (level 3 link)

.indi-long-form-text h4 color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 24px
font-weight: 600
line-height: 32px

H4 (level 4)

H4 (level 4 link)

.indi-long-form-text h5 color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 20px
font-weight: 400
line-height: 24px
H5 (level 5)
H5 (level 5 link)
.indi-long-form-text h6 color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 18px
font-weight: 400
line-height: 24px
H6 (level 6)
H6 (level 6 link)
.indi-long-form-text p.indi-long-form-text__p--intro color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 28px
font-weight: 300
line-height: 38px

Intro Paragraph

Used to introduce the first paragraph or an important piece of content at the beginning of an article or content-heavy page.

.indi-long-form-text p color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 18px
font-weight: 300
line-height: 28px

Paragraph (Default)

Used for paragraphs (large blocks of content) on article or content-heavy pages.

.indi-long-form-text a color: #006FF4
fill: #006FF4
text decoration: none
Link

Use links to connect the user to internal or external pages, more information, or files.

.indi-long-form-text p.indi-long-form-text__p--small color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 16px
font-weight: 400
line-height: 24px

Paragraph (Small)

Used for smaller blocks of copy, such as notifications or tool tips

.indi-long-form-text ul color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 18px
font-weight: 300
line-height: 28px
  • High Cost Program:
    • Eligibility requirements
    • Line count submissions
    • Data Submissions
.indi-long-form-text ol color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 18px
font-weight: 300
line-height: 28px
  1. High Cost Program:
    1. Eligibility requirements
    2. Line count submissions
    3. Data Submissions
.indi-long-form-text img
Example Image
<div class="indi-long-form-text">
    <h1>H1 (page title)</h1>
    <h2>H2 (level 2)</h2>
    <h2>
        <a href="#">H2 (level 2 link)</a>
    </h2>
    <h3>H3 (level 3)</h3>
    <h3>
        <a href="#">H3 (level 3 link)</a>
    </h3>
    <h4>H4 (level 4)</h4>
    <h4>
        <a href="#">H4 (level 4 link)</a>
    </h4>
    <h5>H5 (level 5)</h5>
    <h5>
        <a href="#">H5 (level 5 link)</a>
    </h5>
    <h6>H6 (level 6)</h6>
    <h6>
        <a href="#">H6 (level 6 link)</a>
    </h6>
    <p class="indi-long-form-text__p--intro">Intro Paragraph</p>
    <p>Paragraph (Default)</p>
    <a href="#">Link</a>
    <p class="indi-long-form-text__p--small">Paragraph (Small)</p>
    <ul>
        <li>High Cost Program:
            <ul>
                <li>Eligibility requirements</li>
                <li>Line count submissions</li>
                <li>Data Submissions</li>
            </ul>
        </li>
    </ul>
    <ol>
        <li data-index="1.">High Cost Program:
            <ol>
                <li data-index="a.">Eligibility requirements</li>
                <li data-index="b.">Line count submissions</li>
                <li data-index="c.">Data Submissions</li>
            </ol>
        </li>
    </ol> <img alt="Example Image" src="/assets/images/doc-screenshots/long-form-text-image.jpg" /> </div>