sass-site/source/styleguide/components.liquid

---
title: Components
---

{{ '## Closed' | markdown }}

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

{{ '## Open' | markdown }}

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

{{ '## Alerts' | markdown }}

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

{{ '## Buttons' | markdown }}

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

{{ '## Callouts' | markdown }}

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

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

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

{{ '## Introduction' | markdown }}

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

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

{{ '## Link Headers' | markdown }}

{{ '## Link Header 2' | markdown }}
{{ '### Link Header 3' | markdown }}
{{ '#### Link Header 4' | markdown }}

{{ '## Lists' | markdown }}

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

{{ '## Pop Stripe' | markdown }}

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

{{ '## Tables' | markdown }}

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