Developers can style components (background colors, text colors, typefaces, elements, etc.) using the Style Editor. When viewing your page in Edit Mode, click the Edit Styles button in the lower left corner of the component you wish to edit.
Component Utility Classes
These are the classes that will be applied to your component’s outer container, for example background colors, text-alignment, background effects, background positioning and so on. Here is an example:
bg-wvu-blue wvu-bg-topo-light text-center
For more information on utilities, see the Utilties section.
Aria Label
To make our components accessible, an aria-labelledby attribute is automatically
applied to each component by associating it with the component’s header, which
serves as the label for the component. However, some components don’t have a header
to hook into. If your component lacks a header, you must supply an aria-label manually. You can do this using the Style Editor.
- In Edit Mode, find the component on your page that you want to apply the
aria-labelattribute to. - Click the Edit Styles button near the bottom of your component.
- In the Aria Label field, enter the label you want to apply. This label should describe the content in the component e.g. “Lead Text,” or “List of Featured Pages.”
- Publish your page.
Item Colors
For the Page Collection - Colored Boxes component and the Photo Grid component, you can customize the background colors used for the boxes that display your content.
Collection Item Classes
You can provide utility classes to style individual items in a collection component. Depending on which component you’re using, additional fields will display in the Edit Styles panel. Enter the utility classes in each of these fields to achieve the look you want.
| Field | Description | Example |
|---|---|---|
| Row Classes | This is for the row that contains your items. You normally use this to set the alignment of the items. |
justify-content-center
|
| Item Classes | The classes you want to apply to items. You normally use this to define the number of columns your items should span at different browser widths. |
mb-4 col-md-4 mb-md-0
|
| Item Colors | A comma-separated list of background colors. Use these for the Alternating Grid component or the Page Collection Colored Boxes component. |
wvu-accent--blue,wvu-accent--burnt-orange
|
| Item Header Classes | The classes you want to apply to item headers. |
wvu-shout wvu-bar
|
| Icon Classes | If your component displays icons, use this to set the background color and text color of the icons. |
bg-wvu-gold text-wvu-blue
|
| Item Body Classes | The classes you want to apply to the descriptive text for each item, normally just the typeface. |
iowan-old-style-black
|
| Button Classes | The color, size, and style of the button for each item. |
btn btn-sm btn-wvu-blue
|
| Button Text | The text of the button for each item. Note, you can remove the button entirely by typing in “none” for the button text. | View Profile |