Box

Group structured content into box.

Basic

Box Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque praesentium velit eius, repudiandae voluptatum, non provident modi dolor accusamus sunt inventore omnis saepe repellat, officia veritatis fugiat quo tempore placeat. 

<section class="box">
  <header class="box__header">Box Title</header>
  <div class="box__body">
    <div class="box__inner">
      ...
    </div>
  </div>
</section>

Variant

By adding the following theme modifier classes on .box container to quick create different styled Box

  • .box--info
  • .box--danger
  • .box--success
  • .box--warning
Info Box

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque praesentium velit eius, repudiandae voluptatum, non provident modi dolor accusamus sunt inventore omnis saepe repellat, officia veritatis fugiat quo tempore placeat. 

<section class="box box--info">
  ...
</section>
Danger Box

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque praesentium velit eius, repudiandae voluptatum, non provident modi dolor accusamus sunt inventore omnis saepe repellat, officia veritatis fugiat quo tempore placeat. 

<section class="box box--danger">
  ...
</section>
Success Box

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque praesentium velit eius, repudiandae voluptatum, non provident modi dolor accusamus sunt inventore omnis saepe repellat, officia veritatis fugiat quo tempore placeat. 

<section class="box box--success">
  ...
</section>
Warning Box

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque praesentium velit eius, repudiandae voluptatum, non provident modi dolor accusamus sunt inventore omnis saepe repellat, officia veritatis fugiat quo tempore placeat. 

<section class="box box--warning">
  ...
</section>

Accordion

Pure HTML&CSS accordion component without any JavaScript code

Accordion Box #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque praesentium velit eius, repudiandae voluptatum, non provident modi dolor accusamus sunt inventore omnis saepe repellat, officia veritatis fugiat quo tempore placeat. 

<details class="box">
  <summary class="box__header">Click Me</summary>
  <div class="box__body">
    <div class="box__inner">
      ...
    </div>
  </div>
</details>