Drawers or sliders
Drawers, or sliders as they are sometimes called, provide access to content and actions, such as detailed views, filtering options and more. It is a very versatile component that can either be permanently visible or open by clicking on e.g. a list item or settings.
Use when
- You need to offer a more detailed view of a list item, where the information does not fit in an expand collapse list. Examples include full information about an invoice, time and absence overviews, payslips, CV's and much more.
- You need to offer a more detailed view of information where the user can take one or more actions, for instance choose to delete, edit or add items.
- You need to offer a quick way to navigate between detailed views of e.g. list items. Examples include invoices and CV's.
You can see an example of the drawer being used in practice in this Kindergarten prototype.
Follow the HTML stucture listed in the right panel to get the drawers/sliders into your project.
Drawer size
Drawers/sliders have 3 optional sizes:
- 75% of your viewport (
.drawer-lg) - 50% of your viewport (is the default size of the drawers or
.drawer-md) - 25% of your viewport (
.drawer-sm)
Title of the default (medium) drawer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula ex ex. Nullam lacinia nisl nisi, at tincidunt felis condimentum quis. Sed condimentum mi ut enim rutrum, quis tempus felis semper. Suspendisse posuere mi non mauris laoreet aliquet. Morbi diam orci, vulputate in posuere id, posuere in sem. Nam ornare urna magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean gravida volutpat leo nec vestibulum. Mauris sit amet rutrum erat, nec bibendum orci. Aenean tincidunt massa metus, non egestas dolor vulputate vel. Etiam hendrerit eget sapien feugiat fringilla. Integer vitae elementum lectus.
Title of the small drawer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula ex ex. Nullam lacinia nisl nisi, at tincidunt felis condimentum quis. Sed condimentum mi ut enim rutrum, quis tempus felis semper. Suspendisse posuere mi non mauris laoreet aliquet. Morbi diam orci, vulputate in posuere id, posuere in sem. Nam ornare urna magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean gravida volutpat leo nec vestibulum. Mauris sit amet rutrum erat, nec bibendum orci. Aenean tincidunt massa metus, non egestas dolor vulputate vel. Etiam hendrerit eget sapien feugiat fringilla. Integer vitae elementum lectus.
Title of the large drawer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula ex ex. Nullam lacinia nisl nisi, at tincidunt felis condimentum quis. Sed condimentum mi ut enim rutrum, quis tempus felis semper. Suspendisse posuere mi non mauris laoreet aliquet. Morbi diam orci, vulputate in posuere id, posuere in sem. Nam ornare urna magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean gravida volutpat leo nec vestibulum. Mauris sit amet rutrum erat, nec bibendum orci. Aenean tincidunt massa metus, non egestas dolor vulputate vel. Etiam hendrerit eget sapien feugiat fringilla. Integer vitae elementum lectus.
For this component you need JavaScript! We recommend you to create your own script to open and close the drawer/slider. If you need help just contact us.
Alternatives
// Basic drawer/slider
<div class="drawer" role="dialog">
<div class="drawer-header">
<button type="button" class="close">Close</button>
<h4>Title of the drawer</h4>
</div>
<div class="drawer-body">
...
</div>
<div class="drawer-footer justify-content-end d-flex">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn">Close</button>
</div>
</div>
// Small drawer/slider
<div class="drawer drawer-sm" role="dialog">
...
</div>
// Large drawer/slider
<div class="drawer drawer-lg" role="dialog">
...
</div>