User-Generated Content

When dealing with content that may come from an admin or CMS, wrap a parent element in the .ugc class to reset all of the elements to match the Clientkit style.

Variables

None

Mixins

ugc

Parameters

None

Usage

@mixin ugc;

Output

.ugc {
  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6,
  & p,
  & ol,
  & ul {
    @mixin spacing margin, top, none;
    @mixin spacing margin, bottom, md;
  }
  & h1 {
    @mixin heading var(--heading-1-size), var(--heading-1-mobile-size);
  }
  & h2 {
    @mixin heading var(--heading-2-size), var(--heading-2-mobile-size);
  }
  & h3 {
    @mixin heading var(--heading-3-size), var(--heading-3-mobile-size);
  }
  & h4 {
    @mixin heading var(--heading-4-size), var(--heading-4-mobile-size);
  }
  & h5 {
    @mixin heading var(--heading-5-size), var(--heading-5-mobile-size);
  }
  & ul,
  & ol {
    padding-left: 25px;
  }
  & ul li {
    list-style-type: disc;
  }
  & table {
    width: 100%;
    & th {
      text-align: left;
    }
  }
}

Helpers

.ugc

Example

<div class="ugc">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <p>Default body font</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <ol>
    <li>Ordered Item 1</li>
    <li>Ordered Item 2</li>
    <li>Ordered Item 3</li>
  </ol>
  <table>
    <thead>
      <tr>
        <th>Table Header 1</th>
        <th>Table Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Header 1</td>
        <td>Table Header 2</td>
      </tr>
    </tbody>
  </table>
</div>