Box

Boxes provide a simple container for other elements. They can be customized with headers and footers

Box sizes

By default box height is determined by the elements within the box, while the width is inherited from the parent container.

Default size



<div class="box">
    <h3>Title</h3>
    <a>Related Link</a>
</div>

Specific size

You can set specific width and height values by adding a style attribute in the box <div> tag.



<div class="box" style="width:345px;">
    <h3><a>Header</a></h3>
    <h5>Sub Title</h5>
    <br />
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p>
</div>

Customize boxes with a footer by adding a <footer> tag to the end of your box <div>. Wrap footer text in a <p> tag.



<div class="box" style="width:310px;">
<h3><a>Header</a></h3>
<h5>Sub Title</h5>
<br />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p>
<br />
<footer>
<p>This is a footer.</p>
</footer>
</div>

Variables

You can use these variables to change the visual appearence when creating your own Denali themes in SCSS.

Variable Name CSS Property
$box-bg-color background
$box-corner-radius border-radius
$box-border-color border-color
$box-border-width border-width
$box-border-style border-style
$box-padding padding
$box-footer-padding padding
$box-footer-margin margin