Aldrich: Component and utility classes

The Aldrich template includes a number of classes that are available for you to use in WYSIWYG content and in your customizations.

Applying classes in code / customizations

Add space separated values to the class attribute of your desired element.

<button class="button button--outline button--blue">I'm a button</button>

The above example defines a button with a blue outline by applying three classes:

button
button--outline
button--blue

Applying classes to WYSIWYG content

You can access a list of all available classes in two (very similar) ways:

From the WYSIWYG menu bar, select Format > Formats > Custom

accessing classes from the wysiwyg menu bar

Alternatively, you can access the same list from the WYSIWYG tool bar instead: Formats > Custom

accessing classes from the wysiwyg tool bar

From the list of classes, select the ones you want to apply. Currently applied class will appear in the list with a gray bar to the left of the class name.

You will also notice that the WYSIWYG will (in most, but not all cases) display the effects of applying the selected classes in its preview window. In the pictured example, three classes are applied to the word Lorem,

Not all WYSIWYGs offer access to the list of classes (e.g., the footer). This is by design.

Available classes

Buttons

All buttons require the base class button combined with two modifier classes. One modifier class will define the button as solid vs. outline, and the second modifier class will define the button’s color.

Button classes can be applied to both button and link elements (<button> and <a>, respectively).

Modifier class	What this does	Notes

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

<button class="button button--outline button--blue">button</button>

<a href="..." class="button button--solid button--gold">link</a>

Images

Image classes are used to align your images within surrounding content and require the base class image combined with an alignment modifier class.

Image classes can be used with both image and figure elements (<img> and <figure>, respectively)

Modifier class	What this does	Notes

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

<img src="..." alt="..." class="image image--align-center"/>

<img src="..." alt="..." class="image image--align-left"/>

<figure class="image image--align-right">
  <img src="..." alt="..."/>
  <figcaption>Caption</figcaption>
</figure>

When working with figure elements, things will turn out weird if the image classes are applied to the nested image element instead of the figure element itself. Be sure select the figure and not the image!

→ Details: Selecting elements in WYSIWYGs

Lists

Want a stylized list? Simply add the list class to any list element (<ul> or <ol>).

<ul class="list">
  ...
</ul>

Lists can be tricky to select in WYSIWYGs.

→ Details: Selecting elements in WYSIWYGs

Panels

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

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

<p class="panel panel--gray">...</p>

<ul class="panel panel--yellow">
  ...
</ul>

Quotes

Want to turn a block of text into a quote? Apply the quote class. Want to attribute the quote to someone? Apple the quote__attribution class.

<blockquote class="quote">
  <p>...</p>
  <p class="quote__attribution">...</p> 
</blockquote>

This doesn’t only work with <blockquote> elements. Any block-level wrapper should work (e.g., <div>, <p>, etc.).

How to apply quotes in WYSIWYGs

If you only have a single-paragraph quote, simply highlight that paragraph and apply the quote class as normal.

If you have a multiple-paragraph quote, or want to add an attribution…

Type out the quote in its entirety, with each paragraph and the attribution on separate lines.
Highlight the entire quote, including attribution.
From the WYSIWYG toolbar, select Formats > Blocks > Blockquote.
Apply the quote class to the blockquote element, and quote__attribution class to the attribution line.

How do I select the blockquote element?

→ Details: Selecting elements in WYSIWYGs

Separators

Separators are stylized horizontal rule elements and serve to break up content visually.

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

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

<hr class="separator separator--center separator--gold"/>

<hr class="separator separator--left separator--gray"/>

Tables

You can stylize your tables by applying the table class to your table elements. Make them sortable by applying the table--sortable class (also to the table element).

<table class="table">
  ...
</table>

<table class="table table--sortable">
  <thead>
    <tr>
      <th scope="col">...</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
    </tr>
    ...
  </tbody>
</table>

Be sure your tables are properly structured with <thead>, <th>, and <tbody> elements. You can apply these structural elements to a table in a WYSIWYG by right-clicking within a table cell and selecting the appropriate options in the context menu under Row > Row properties (for rows) and Cell > Cell properties (for cells).

Text

There are a number of utility classes available for working with text.

Note that in all the text examples below, the size likely appears off because they’re all done with screen grabs and the images get resized according to the size of your browser window. Hopefully you get the gist though.

Sizing

Set the size of your text using one of the following classes:

text--extraSmall
text--small
text--large
text--extraLarge

<p class="text--extraSmall">...</p>
<p class="text--small">...</p>
<p class="text--large">...</p>
<p class="text--extraLarge">...</p>

Alignment

Set the alignment of your text with one of the following classes:

text--left
text--center
text--right
text--justify

<p class="text--left">...</p>
<p class="text--center">...</p>
<p class="text--right">...</p>
<p class="text--justify">...</p>

Emulating headings

If you want to your text to look like a heading, without actually being a heading, use one of these:

text--emulate-h1
text--emulate-h2
text--emulate-h3
text--emulate-h4
text--emulate-h5
text--emulate-h6

<p class="text--emulate-h1">...</p>
<p class="text--emulate-h2">...</p>
<p class="text--emulate-h3">...</p>
<p class="text--emulate-h4">...</p>
<p class="text--emulate-h5">...</p>
<p class="text--emulate-h6">...</p>

Animating links

The following classes will cause links to animate on hover and focus:

text--animated-links
text--animated-links-boderless
text--animated-link
text--animated-link-borderless

What’s the difference?

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 (note the singular link in the class name).

<!-- Apply animations to all links -->
<p class="text--animated-links">
  Be a hero - <a href="...">adopt a homeless animal</a> or <a href="...">make a monetary donation</a>.
</p>

<!-- Apply animation to a specific link -->
<p>
  Be a hero - <a class="text--animated-link" href="...">adopt a homeless animal</a> or <a href="...">make a monetary donation</a>.
</p>

Classes with the -borderless suffix have no border treatment applied in the links off state, whereas classes without the -borderless suffix will apply a bottom border in this case.

WYSIWYGs apply link animations by default, so there is no need to use these classes there. These classes are most helpful in custom widgets and layouts.

→ Detail: Creating custom widgets and layouts