...
| Info |
|---|
Button classes can be applied to both button and link elements (<button> and <a>, respectively). |
Modifier class | What this does | Notes |
|---|---|---|
button--outline | Button type modifier. Defines an outlined button. | Do not combine with other button type modifier classes. |
button--solid | Button type modifier. Defines a solid button. | Do not combine with other button type modifier classes. |
button--blue | Color modifier. Colors the button blue. | Do not combine with other color modifiers. |
button--gold | Color modifier. Colors the button gold. | Do not combine with other color modifiers. |
button--gray | Color modifier. Colors the button gray. | Do not combine with other color modifiers. |
Examples
...
| Code Block |
|---|
<button class="button button--outline button--blue">button</button> |
...
| Code Block |
|---|
<a href="..." class="button button--solid button--gold">link</a> |
...
| Info |
|---|
Image classes can be used with both image and figure elements (<img> and <figure>, respectively) |
Modifier class | What this does | Notes |
|---|---|---|
image--align-center | Centers the image on its own line. | Do not combine with other alignment modifiers. |
image--align-left | Aligns the image left with surrounding content wrapping around the image’s right side. | Do not combine with other alignment modifiers. |
image--align-right | Aligns the image right with surrounding content wrapping around the image’s left side. | Do not combine with other alignment modifiers. |
Examples
...
| Code Block |
|---|
<img src="..." alt="..." class="image image--align-center"/> |
...
Panels help content stand out by applying a border and background color. The base class panel is required here along with a color modifier class.
Modifier class | What this does | Notes |
|---|---|---|
panel--gray | Colors the panel gray. | Do not combine with other color modifiers. |
panel--yellow | Colors the panel yellow. | Do not combine with other color modifiers. |
Examples
...
| Code Block |
|---|
<p class="panel panel--gray">...</p> |
...
All separators require the base class separator combined with two modifier classes. One modifier class will define the separator alignment, and the second modifier class will define the color.
Modifier class | What this does | Notes |
|---|---|---|
separator--left | Aligns the separator to the left. | Do not combine with other alignment modifier classes. |
separator--center | Centers the separator. | Do not combine with other alignment modifier classes. |
separator--blue | Color modifier. Colors the separator blue. | Do not combine with other color modifiers. |
separator--gold | Color modifier. Colors the separator gold. | Do not combine with other color modifiers. |
separator--gray | Color modifier. Colors the separator gray. | Do not combine with other color modifiers. |
Examples
...
| Code Block |
|---|
<hr class="separator separator--center separator--gold"/> |
...
Classes text--animated-links and text--animated-links-borderless are applied to container elements (e.g., <div>, <p>, etc.) and apply hover/focus animations to all links within that element (note the plural links in the class name). Classes text--animated-link and text--animated-link-borderless are applied directly to <a> elements and affect only the elements they are applied to (not note the singular link in the class name).
...