Aldrich: Component and utility styles

The Aldrich templates include a number of styles that are available for you to use in WYSIWYG content and in your customizations.

How these work

Using a these styles requires you to apply one or more classes to your desired element.

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,