NetApp logo
LUCI Version 4.0.0

Long Form Text

Long form text is a component used to create articles, technical documentation, press releases and other common long forms of copy intended to be read directly in a browser.

The LUCI long form text applies vertical spacing to optimize readability of long blocks of text content. It is founded on the overall LUCI typographic system.

How to Use Long Form Text

To use the long form text component, enclose simple HTML tags–<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <ul>, <ol>, img, <hr> and <a>- within an enclosing block with class="luci-long-form-text".

Combining Long Form Text With Other Components

The example below shows how two blocks of long form text start and stop to include a data table component between those segments. Each Long Form Text component will have a bottom margin of 32px to ensure the placed component is adequately spaced.

Level 1 Heading

Paragraph Large Body Text (Default)

  • Unordered List Item
  • Unordered List Item

Level 2 Heading

Customer Name Hostname Model Serial Number System Age (Years) Platform EOA Date
Sample Name Test 1 FAS2554 701517001122 2
Sample Name Test 2 FAS3170 700000208098 7 2/03/2017
Sample Name Test 3 FAS3170 700000212609 7 4/06/2017

Level 1 Heading

Paragraph Large Body Text (Default)

Copied to clipboard 
<div class="luci-long-form-text">
    <h1>Level 1 Heading</h1>
    <p>Paragraph Large Body Text (Default)</p>
    <ul>
        <li><strong>Unordered</strong> List Item</li>
        <li><strong>Unordered</strong> List Item</li>
    </ul>
    <h2>Level 2 Heading</h2>
</div>
<div class="luci-table">
    <table class="luci-table__table">
        <thead>
            <tr>
                <th class="" scope="col"> Customer Name </th>
                <th class="" scope="col"> Hostname </th>
                <th class="" scope="col"> Model </th>
                <th class="" scope="col"> Serial Number </th>
                <th class="" scope="col"> System Age (Years) </th>
                <th class="" scope="col"> Platform EOA Date </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> Sample Name </td>
                <td> Test 1 </td>
                <td> FAS2554 </td>
                <td>
                    <a href="#">701517001122</a>
                </td>
                <td> 2 </td>
                <td>
                </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 2 </td>
                <td> FAS3170 </td>
                <td>
                    <a href="#">700000208098</a>
                </td>
                <td> 7 </td>
                <td> 2/03/2017 </td>
            </tr>
            <tr>
                <td> Sample Name </td>
                <td> Test 3 </td>
                <td> FAS3170 </td>
                <td>
                    <a href="#">700000212609</a>
                </td>
                <td> 7 </td>
                <td> 4/06/2017 </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="luci-long-form-text">
    <h2>Level 1 Heading</h2>
    <p>Paragraph Large Body Text (Default)</p>
</div>

Type Samples

These are all long form text classes and associated selectors.

Level 1 Heading

Long form text selector Utility class

.luci-long-form-text h1

.luci-text-level-1

Level 2 Heading

Long form text selector Utility class

.luci-long-form-text h2

.luci-text-level-2

Level 3 Heading

Long form text selector Utility class

.luci-long-form-text h3

.luci-text-level-3

Level 4 Heading

Long form text selector Utility class

.luci-long-form-text h4

.luci-text-level-4
Level 5 Heading
Long form text selector Utility class

.luci-long-form-text h5

.luci-text-level-5
Level 6 Heading
Long form text selector Utility class

.luci-long-form-text h6

.luci-text-level-6

Paragraph Lead. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes.

Long form text selector Utility class

.luci-long-form-text p.luci-long-form-text__p--lead

.luci-text-p--lead

Paragraph Large Body Text (Default). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes.

Long form text selector Utility class

.luci-long-form-text p

.luci-text-p

Paragraph Footnote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes.

Long form text selector Utility class

.luci-long-form-text p.luci-long-form-text__p--footnote

.luci-text-p--footnote
  • Unordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
  • Unordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
Long form text selector Utility class

.luci-long-form-text ul

.luci-text-ul
  1. Ordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
  2. Ordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
Long form text selector Utility class

.luci-long-form-text ol

.luci-text-ol

Example

A true long form article revealing bottom-margin when combining elements.

Level 1 Heading Nunc quis dolor auctor, auctor dolor a, cursus justo phasellus quis.

Paragraph Lead. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.

Paragraph Large Body Text (Default). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.

Level 2 Heading Cursus justo. Phasellus quis tellus vel.

Paragraph Large Body Text (Default). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.

Level 3 Heading Auctor dolor a, cursus justo tellus vel turpis.

Paragraph Large Body Text (Default). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.

Level 3 Heading Auctor dolor a, cursus justo tellus vel turpis.

Paragraph Large Body Text (Default). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.

Level 4 Heading Phasellus quis tellus vel turpis.

Paragraph Large Body Text (Default). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.

  • Unordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
  • Unordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
  • Unordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
  • Unordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.

Level 4 Heading Phasellus quis tellus vel turpis.

Paragraph Large Body Text (Default). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.

  1. Ordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
  2. Ordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
  3. Ordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.
  4. Ordered List Item Pellentesque sapien lorem, pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non.

Paragraph Footnote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.

Level 5 Heading Tellus vel turpis.

Paragraph Large Body Text (Default). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.

Level 6 Heading Quis tellus vel turpis.

Paragraph Large Body Text (Default). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra vehicula mattis. Praesent in erat at mauris tristique dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sapien lorem, pulvinar vel felis non, efficitur dignissim eros.