mirror of
https://github.com/danog/sass-site.git
synced 2024-11-27 04:24:50 +01:00
128 lines
2.4 KiB
Plaintext
128 lines
2.4 KiB
Plaintext
---
|
|
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>
|