...
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 righ right with surrounding content wrapping around the image’s left side. | Do not combine with other alignment modifiers. |
...
| Info |
|---|
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 |
|---|---|---|
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"/> |
...
| Code Block |
|---|
<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).
...
| Code Block |
|---|
<table class="table">
...
</table> |
...
| Code Block |
|---|
<table class="table sortable">
<thead>
<tr>
<th scope="col">...</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
...
</tr>
...
</tbody>
</table> |
| Info |
|---|
Making tables sortable requires they be 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). |