button
Buttons are designed to be placed in a center-aligned row using browser defaults and to have different levels of impact. There are four different types of button, but they all use the same base code.
EXAMPLE
Social Buttons
HTML
<div>
<button class="button impact">Impact button</button>
<button class="button ghost">Ghost button</button>
<button class="button promo">Promo button</button>
<button class="button">Text button</button>
<button class="button social facebook">Sign in with Facebook</button>
<button class="button social google">Sign in with Google</button>
<button class="button social apple">Sign in with Apple</button>
</div>
RULES
| Property | Value |
|---|---|
| Typeface | Noto Sans |
| Weight | 600 |
| Size | 1rem (16px) |
| Border | 1 pixel solid #4a4a4a with a 2-pixel radius |
| Case | Uppercase |
SELECT
Custom selects use a combination of the expander molecule and link-based buttons instead of the native select element for forms. Because they are based on the expander, a toggle of the open class will show and remove the option list. Lastly, adding the class selected to any of options will make it bold. Different use cases will most likely require different javascript, but we have a starter script for the purposes of this demo.
EXAMPLE
HTML
<div class="select">
<span class="button big expander" onclick="this.classList.toggle('open');">Order by</span>
<div class="options">
<a class="button big" href="#" data-name="Relevance">Relevance</a>
<a class="button big" href="#" data-name="Newest">Newest</a>
<a class="button big" href="#" data-name="Oldest">Oldest</a>
</div>
</div>