Skip to main content

Using the Component Styler

Applying Utility Classes to a Component

Each component can be styled within the CleanSlate editor. At the bottom of each component you will see an Edit button that will toggle special region that lets you apply utility classes to the outer-most container of your component. This means you can set things like text alignment, text color, background color, and background effects for the component (see our utility classes). There is also a handy “hints” link that will display all of the options. The background styler also displays the label you should apply to set an image as the background of your component. 

Applying Utility Classes to Individual Elements

Some components allow you to apply utility classes to individual elements, for example the header of the hero component. This will let you change the size (for example you might make the size smaller for longer headings), the typeface, or add a slash element. This is available on the hero and action-hero components. For the featurettes component, you can also set the style of individual panels, headers, button styles, and button text.