Indigo Design System v1.2.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 a Long Form Text component, instead close each block to include just the long form text elements.

The example below shows a Notification component between two Long Form Text Components:

Long Form Text H1 tag

Long Form Text p tag.

success Notification Component

Long Form Text H2 tag

Long Form Text p tag.

<div class="indi-long-form-text">
    <h1>Long Form Text H1 tag</h1>
    <p>Long Form Text p tag.</p>
</div>
<div class="indi-notification indi-notification--success">
    <svg class="indi-icon" aria-labelledby="title">
        <title>success</title>
        <use xlink:href="/assets/icons/indi_icons.svg#success">
    </svg> Notification Component</div>
<div class="indi-long-form-text">
    <h2>Long Form Text H2 tag</h2>
    <p>Long Form Text p tag.</p>
</div>
CLASS/OUTCOME < 767px 768px to 1199px 1200px + FONT NAME/
WEIGHT/COLOR
.indi-long-form-text h1

H1 (page title)

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

38px/44px 44px/50px 56px/64px 'Source Sans Pro', sans-serif/
300/#006FF4
.indi-long-form-text h2

H2 (level 2)

H2 (level 2 link)

 30px/36px 32px/38px 40px/42px 'Source Sans Pro', sans-serif/
600/#616161
.indi-long-form-text h3

H3 (level 3)

H3 (level 3 link)

 24px/32px 28px/34px 32px/38px 'Source Sans Pro', sans-serif/
400/#404040
.indi-long-form-text h4

H4 (level 4)

H4 (level 4 link)

 18px/24px 22px/30px 24px/32px 'Source Sans Pro', sans-serif/
600/#404040
.indi-long-form-text h5
H5 (level 5)
H5 (level 5 link)
 16px/22px 18px/24px 20px/24px 'Source Sans Pro', sans-serif/
600/#404040
.indi-long-form-text h6
H6 (level 6)
H6 (level 6 link)
 16px/22px 18px/24px 18px/24px 'Source Sans Pro', sans-serif/
400/#404040
.indi-long-form-text p.indi-long-form-text__p--intro

Intro Paragraph

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

20px/28px 24px/32px 28px/38px 'Source Sans Pro', sans-serif/
300/#404040
.indi-long-form-text p

Paragraph (Default)

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

16px/22px 18px/24px 18px/28px 'Source Sans Pro', sans-serif/
300/#404040
.indi-long-form-text p.indi-long-form-text__p--small

Paragraph (Small)

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

16px/24px 16px/24px 16px/24px 'Source Sans Pro', sans-serif/
400/#404040
.indi-long-form-text a
Link

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

color: #006FF4
fill: #006FF4
text decoration: none
.indi-long-form-text ul
  • High Cost Program:
    • Eligibility requirements
    • Line count submissions
    • Data Submissions
 16px/22px 18px/24px 18px/28px 'Source Sans Pro', sans-serif/
300/#404040
.indi-long-form-text ol
  1. High Cost Program:
    1. Eligibility requirements
    2. Line count submissions
    3. Data Submissions
 16px/22px 18px/24px 18px/28px 'Source Sans Pro', sans-serif/
300/#404040
.indi-long-form-text img
Example Image
html
copy-2 Copy to Clipboard 
<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>