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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

Variables

You can use these variables to customize this component. Simply set one or multiple of these variables and recompile the SCSS.

$box-config:

Name Type Default value Computed value
backgound background map-get($denali-grey-colors, '200') #f8f8f8
border-radius border-radius 2px  
border:color border-top-color map-get($denali-grey-colors, '500') #d5d5d5
border:width border-top-width 1px  
border:style border-top-style solid  
padding padding 20px  
footer:padding padding 22px  
footer:margin margin 22px