Button
Buttons rely on color helpers for background and text color. The variations are simply sizes. One catch is that are buttons run small in sizes so the names aren't true to their padding and font-size assignments.
.c-button
<button class="c-button ">
Button
</button>
| Repo | Count | Location(s) |
|---|---|---|
| feature-general-ballot-2020-08 | 2 | List |
| texastribune | 5 | |
| data-visuals-create | 1 | List |
| festival | 16 | List
|
| feature-voter-guide-general-2020-08 | 1 | List |
| donations | 1 | List |
.c-button--standard
Custom-sized button found throughout our products. Has a hard-set height and line-height for vertical alignment.
<button class="c-button c-button--standard">
Button
</button>
| Repo | Count | Location(s) |
|---|---|---|
| data-visuals-create | 2 | List |
| feature-general-ballot-2020-08 | 2 | List |
| feature-voter-guide-general-2020-08 | 2 | List |
| texastribune | 13 | |
| state-salaries-draft | 1 | List |
.c-button--l
Uses size-l for font size and padding
.c-button--s
One step down from default
<button class="c-button c-button--s">
Button
</button>
| Repo | Count | Location(s) |
|---|---|---|
| donations | 3 | |
| texastribune | 5 | |
| feature-texan-since-responses-2019-09 | 2 | |
| smaragdine-september | 1 | List |
| docker-tt-nginx | 1 | List |
.c-button--xs
Two steps down from default
<button class="c-button c-button--xs">
Button
</button>
| Repo | Count | Location(s) |
|---|---|---|
| texastribune | 1 | List |
.c-button--circle
Fixed height and width button paired with
is-rounded-full
<button class="c-button c-button--circle is-rounded-full">
<span class="l-align-center-y t-size-xxs"><span class="c-icon c-icon--arrow-up l-display-block"><svg aria-hidden="true">
<use xlink:href="#arrow-up"></use>
</svg></span>Back to Top</span>
</button>
| Repo | Count | Location(s) |
|---|---|---|
| texastribune | 1 | List |
.c-button--outline
Hover effect of outline (used on social)
<button class="c-button c-button--outline has-text-facebook has-bg-facebook has-text-hover-facebook l-align-center-children">
<span class="c-button__inner c-icon"><svg aria-hidden="true">
<use xlink:href="#facebook"></use>
</svg></span>
</button>
| Repo | Count | Location(s) |
|---|---|---|
| feature-general-ballot-2020-08 | 1 | List |
| texastribune | 11 | |
| data-visuals-create | 1 | List |
| feature-voter-guide-general-2020-08 | 1 | List |
.c-button--skip
Visible only on focus, this is used to skip navigation
<button class="c-button c-button--skip">
Button
</button>
| Repo | Count | Location(s) |
|---|---|---|
| texastribune | 2 | List |
| smaragdine-september | 1 | List |
| docker-tt-nginx | 1 | List |