sass-site/source/styleguide/components.liquid

---
title: Components
---

<h2>Closed</h2>

<dl class="sl-c-description-list sl-c-description-list--horizontal">
  <div>
    <dt>Dart Sass</dt>
    <dd>✓</dd>
  </div>
  <div>
    <dt>Ruby Sass</dt>
    <dd>since 3.5.0</dd>
  </div>
  <div><a href="#">▶︎</a></div>
</dl>

<h2>Open</h2>

<dl class="sl-c-description-list sl-c-description-list--horizontal">
  <div>
    <dt>Dart Sass</dt>
    <dd>✓</dd>
  </div>
  <div>
    <dt>Ruby Sass</dt>
    <dd>since 3.5.0</dd>
  </div>
  <div><a href="#">▼</a></div>
</dl>

<div class="sl-c-callout">
  <p>{% lorem 'paragraph' %}</p>
</div>

<h2>Alerts</h2>

<div class="sl-c-alert">
  <div class="sl-l-container">
    <p>
      <strong>Alert</strong>
      {% lorem 'sentence' %}
    </p>
  </div>
</div>

<div class="sl-c-alert sl-c-alert--info">
  <div class="sl-l-container">
    <p>
      <strong>Info Alert</strong>
      {% lorem 'sentence' %}
    </p>
  </div>
</div>

<h2>Buttons</h2>

<a href="#" class="sl-c-button">Link</a>
<button class="sl-c-button" type="button">Button</button>

<a href="#" class="sl-c-button sl-c-button--primary">Link</a>
<button class="sl-c-button sl-c-button--primary" type="button">Button</button>

<h2>Callouts</h2>

<div class="sl-c-callout">
  <h3>Callout</h3>
  <p>{% lorem 'paragraph' %}</p>
</div>

<div class="sl-c-callout sl-c-callout--warning">
  <h3>Warning</h3>
  <p>{% lorem 'paragraph' %}</p>
</div>

<div class="sl-c-callout sl-c-callout--fun-fact">
  <h3>Fun Fact</h3>
  <p>{% lorem 'paragraph' %}</p>
</div>

<h2>Introduction</h2>

<p class="sl-c-introduction">
  {% lorem 'paragraph' %}
</p>

<div class="sl-c-introduction">
  <p>{% lorem 'paragraph' %}</p>
</div>

<h2>Link Headers</h2>

<h2 id="link-header-2">Link Header 2</h2>
<h3 id="link-header-3">Link Header 3</h3>
<h4 id="link-header-4">Link Header 4</h4>

<h2>Lists</h2>

<div class="sl-c-list-navigation-wrapper" style="height: unset; position: unset">
{% markdown %}
- [Vertical](#)
- [Navigation](#)
- [List](#)
{% endmarkdown %}
</div>

<div class="sl-c-list-horizontal-wrapper">
{% markdown %}
- [Horizontal](#)
- [Navigation](#)
- [List](#)
{% endmarkdown %}
</div>

<h2>Pop Stripe</h2>

<div class="sl-c-pop-stripe"></div>

<h2>Tables</h2>

<table class="sl-c-table">
  <tr>
    <td>Table</td>
    <td>Table</td>
  </tr>
</table>