---
title: Components
---

%h2 Closed
%dl.sl-c-description-list.sl-c-description-list--horizontal
  %div
    %dt Dart Sass
    %dd ✓

  %div
    %dt Ruby Sass

    %dd since 3.5.0

  %div= link_to '▶︎', '#'

%h2 Open
%dl.sl-c-description-list.sl-c-description-list--horizontal
  %div
    %dt Dart Sass
    %dd ✓

  %div
    %dt Ruby Sass

    %dd since 3.5.0

  %div= link_to '▼', '#'

.sl-c-callout
  %p= lorem.paragraph

%h2 Alerts
.sl-c-alert
  .sl-l-container
    %p
      %strong Alert
      = lorem.sentence

.sl-c-alert.sl-c-alert--info
  .sl-l-container
    %p
      %strong Info Alert
      = lorem.sentence

%h2 Buttons
= link_to 'Link', '#', class: 'sl-c-button'
%button.sl-c-button(type='button') Button

= link_to 'Link', '#', class: 'sl-c-button sl-c-button--primary'
%button.sl-c-button.sl-c-button--primary(type='button') Button

%h2 Callouts
.sl-c-callout
  %h3 Callout
  %p= lorem.paragraph

.sl-c-callout.sl-c-callout--warning
  %h3 Warning
  %p= lorem.paragraph

.sl-c-callout.sl-c-callout--fun-fact
  %h3 Fun Fact
  %p= lorem.paragraph

%h2 Introduction
%p.sl-c-introduction= lorem.paragraph

.sl-c-introduction
  %p= lorem.paragraph

%h2 Link Headers
%h2#link-header-2
  Link Header 2

%h3#link-header-3
  Link Header 3

%h4#link-header-4
  Link Header 4

%h2 Lists
.sl-c-list-navigation-wrapper
  :markdown
    - [Vertical](#)
    - [Navigation](#)
    - [List](#)

.sl-c-list-horizontal-wrapper
  :markdown
    - [Horizontal](#)
    - [Navigation](#)
    - [List](#)

%h2 Pop Stripe
.sl-c-pop-stripe

%h2 Tables
%table.sl-c-table
  %tr
    %td Table
    %td Table