Use boxes to create alerts and notifications by combining them with Component Styles.
The box class simply adds a border and padding to a container element around content. The contents of a box can be anything from some simple text to a complex form. Boxes are simply visual containers for your content.
This is a box.
<div class="joy-box">
<p>This is a box.</p>
</div>Size helpers for boxes increase the padding sizes of a box. Font-size remains the same for all box sizes, except for .joy-box--x-small which will use a smaller font-size.
NOTE: The vertical margins you see in the examples below are only added for this demo. Boxes have no margins set by default.
This is an extra small box.
This is a small box.
This is a regular sized box.
This is a large box.
This is an extra large box.
<div class="joy-box joy-box--x-small">
<p>This is an extra small box.</p>
</div>
<div class="joy-box joy-box--small">
<p>This is a small box.</p>
</div>
<div class="joy-box">
<p>This is a regular sized box.</p>
</div>
<div class="joy-box joy-box--large">
<p>This is a large box.</p>
</div>
<div class="joy-box joy-box--x-large">
<p>This is an extra large box.</p>
</div>Checkout the Component Styles for a list of all available themes.
This is a success theme and here is a link.
This is a warning theme and here is a link.
This is a error theme and here is a link.
<div class="joy-box joy-theme--success">
<p>This is a
<strong>success</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-theme--warning">
<p>This is a
<strong>warning</strong> theme and here is a <a href="#">link</a>.</p>
</div>
<div class="joy-box joy-theme--error">
<p>This is a
<strong>error</strong> theme and here is a <a href="#">link</a>.</p>
</div>