Living Styleguide

A live example and its markup code can be displayed in a section using Markup.

It can be written as follows.

// ...
//
// Markup: <button class="kss-demo kss-demo-btn">Button</button>
//
// ...

Or it can be spread over multiple lines like this.

// ...
//
// Markup:
// <button class="kss-demo kss-demo-btn">
//     Button
// </button>
//
// ...

🛑 Important: When spreading over multiple lines, there must not be any empty lines in-between the markup code or it will not render correctly.

This will render 2 more panels at the bottom of the section:

• Example block which displays a live example of the component, and
• Markup block which displays the HTML markup that is used to render the example.

💡 Tip: If you only wish to render the example but not the markup code, you can explicitly hide the markup code using HideMarkup.