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
|
|
.indi-long-form-text h3
|
color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 32px
font-weight: 400
line-height: 38px
|
|
.indi-long-form-text h4
|
color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 24px
font-weight: 600
line-height: 32px
|
|
.indi-long-form-text h5
|
color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 20px
font-weight: 400
line-height: 24px
|
|
.indi-long-form-text h6
|
color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 18px
font-weight: 400
line-height: 24px
|
|
.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
|
- High Cost Program:
- Eligibility requirements
- Line count submissions
- Data Submissions
|
.indi-long-form-text img
|
|
|