mirror of
https://github.com/danog/sass-site.git
synced 2024-11-27 12:35:03 +01:00
128 lines
2.2 KiB
Plaintext
128 lines
2.2 KiB
Plaintext
---
|
|
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">
|
|
{% 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>
|