Article pages documentation
Below, are code snippets of what you will need to paste into SiteLeaf, in order to style your page.
Table of Contents
- Generic content
- Generic content - Generic list
- Generic content - Tick list
- Generic content - Ordered list
- Generic content - Table
- Summary
- Image
- Quote bubble
- Icon headings
- Callout
Section styles
Generic content [Top]
Do not nest this code.
<section
class="article_generic"
data-title="Title goes here"
>
<p>Paragraph content...</p>
</section>
Preview:
Generic content - Generic list [Top]
Nest this code inside .article_generic.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Preview:
Generic content - Tick list [Top]
Nest this code inside .article_generic.
<ul class="article_list_tick">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Preview:
Generic content - Ordered list [Top]
Nest this code inside .article_generic.
<ol class="article_list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Preview:
Generic content - Table [Top]
Nest this code inside .article_generic.
<div class="article_table">
<table>
<thead>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1 - Row 1</td>
<td>Column 2 - Row 1</td>
</tr>
<tr>
<td>
<img src="path/to/image" alt="Icon" />
Column 1 - Row 2
</td>
<td>
<img src="path/to/image" alt="Icon" />
Column 2 - Row 2
</td>
</tr>
</tbody>
</table>
</div>
Preview:
Summary [Top]
Do not nest this code.
<section
class="article_summary"
data-title="Title goes here"
>
<p>Paragraph content...</p>
</section>
Preview:
Image [Top]
Can be nested or used stand-alone.
<div
class="article_image"
data-align="full"
data-src="/path/to/image.jpg"
data-alt="Image Alt"
data-caption="Image caption"
></div>
Preview:
Quote bubble [Top]
Do not nest this code.
<section
class="article_quote_bubble"
data-title="Heading"
data-citation="Firstname Lastname"
data-credentials="Job Position"
>
<p>“Quote”</p>
</section>
Preview:
Icon Headings [Top]
Do not nest this code.
<div class="article_icon_heading">
<data
data-icon="/path/to/icon.png"
data-title="Heading"
>
<p>Paragraph content</p>
</data>
<data
data-icon="/path/to/icon.png"
data-title="Heading"
>
<p>First paragraph content</p>
<p>Second paragraph content with <a href="#">links</a></p>
</data>
<!-- repeat <data> element as many times as required -->
</div>
Preview:
Callout [Top]
Do not nest this code.
<section
class="article_callout"
data-icon="path/to/image"
>
<p>Content</p>
</section>
Preview:
