Docs

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

  1. Generic content
  2. Generic content - Generic list
  3. Generic content - Tick list
  4. Generic content - Ordered list
  5. Generic content - Table
  6. Summary
  7. Image
  8. Quote bubble
  9. Icon headings
  10. 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 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 - Generic list 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 - Tick list 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 - Ordered list 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:

Generic content - Table preview

Summary [Top]

Do not nest this code.

<section
  class="article_summary"
  data-title="Title goes here"
>
  <p>Paragraph content...</p>
</section>

Preview:

Summary 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:

Image 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>&#x201c;Quote&#x201d;</p>
</section>

Preview:

Quote bubble 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:

Icon headings preview

Callout [Top]

Do not nest this code.

<section
  class="article_callout"
  data-icon="path/to/image"
>
  <p>Content</p>
</section>

Preview:

Callout preview