Living Styleguide

Modifiers help document and render the states/variants of a component, by using a single copy of markup code. They are essentially the combination of Markup and Parameters used within a section.

// ...
//
// Markup:
// <button class="kss-demo kss-demo-btn {{modifier_class}}">Button</button>
//
// :hover - Highlights when the mouse is hovered over the button
// :active - Highlights when the mouse button is clicked down on the button
// :focus - Highlights when the button receives the focus
//
// ...

This will render 2 more panels in the section (as shown below):

• Examples block which displays live examples of the component used with the given modifiers, and
• Markup block which displays the HTML markup that is used to render each example.

💡 Tip: You can hide the Default styling item using HideDefault.