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-based content. It’s founded upon the overall LUCI typographic system.
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"
.
Do not include other LUCI components directly within the Long Form Text component block. Instead stop the block of long-form text, add the additional desired LUCI component (e.g., Data Tables, Button Groups, etc.), and then restart the long form text block.
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 will be adequately spaced.
Paragraph Large Body Text (Default)
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 |
Paragraph Large Body Text (Default)
<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>
These are all Long Form Text classes and associated selectors.
Long form text selector | Utility class |
---|---|
|
|
Long form text selector | Utility class |
---|---|
|
|
Long form text selector | Utility class |
---|---|
|
|
Long form text selector | Utility class |
---|---|
|
|
Long form text selector | Utility class |
---|---|
|
|
Long form text selector | Utility class |
---|---|
|
|
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 |
---|---|
|
|
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 |
---|---|
|
|
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 |
---|---|
|
|
Long form text selector | Utility class |
---|---|
|
|
Long form text selector | Utility class |
---|---|
|
|
A true long form article revealing bottom-margin when combining elements.
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.
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.
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.
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.
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.
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.
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.
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.
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.