Box | siimple css

Box

A simple layout component to highlight something

As its name suggests, it's just a simple box. It can contain up to three different elements: a title, a subtitle and a detail. To create a basic box, add to a div the class siimple-box:

<div class="siimple-box"></div>

To use any of the three elements that box posesses just create a div for each one and apply the corresponding class: siimple-box-title, siimple-box-subtitle and siimple-box-detail:

Box title

This is the box subtitle

This is the box detail text

<div class="siimple-box">
    <div class="siimple-box-title">Box title</div>
    <div class="siimple-box-subtitle">This is the box subtitle</div>
    <div class="siimple-box-detail">This is the box detail text</div>
</div>

Colored box

You can change the color of the box adding the class siimple-box--[COLOR] to the box you've already created. Check available colors in the theming section.

Box title

This is the box subtitle

This is the box detail text

<div class="siimple-box siimple-box--primary">
    <div class="siimple-box-title">Box title</div>
    <div class="siimple-box-subtitle">This is the box subtitle</div>
    <div class="siimple-box-detail">This is the box detail text</div>
</div>

Legacy colors for the box component will be removed in a future major release of siimple. Consider upgrading to the new colors API.

Box title

This is the box subtitle

This is the box detail text

<div class="siimple-box siimple-box--orange">
    <div class="siimple-box-title">Box title</div>
    <div class="siimple-box-subtitle">This is the box subtitle</div>
    <div class="siimple-box-detail">This is the box detail text</div>
</div>

Found a mistake or want to help improve this documentation? Suggest changes.