Page Comparison

The Aldrich templates include 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:

1. button

2. button--outline

3. 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

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

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,

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.

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.

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>

Lists

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

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

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.

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>

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…

1. Type out the quote in its entirety, with each paragraph and the attribution on separate lines.

2. Highlight the entire quote, including attribution.

   

3. From the WYSIWYG toolbar, select Formats > Blocks > Blockquote.

   

4. Apply the quote class to the blockquote element, and quote__attribution class to the attribution line.

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.

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 sortable">
  <thead>
    <tr>
      <th scope="col">...</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
    </tr>
    ...
  </tbody>
</table>

Text

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

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

Image Modified

<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>