Status
| PublishedElement can be used in production | |
| PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
Documentation | In progressElement design and development in progress |
Drawer
A drawer is a secondary content component that sits off-screen until triggered by the user.
Contents
What's newCopy link to this section
Copy link to this section
The v2 drawer component incorporates several optional elements beyond text, including forms, imagery, and contact methods. In v1, drawer was called “Off Canvas.”
AnatomyCopy link to this section
Copy link to this section
The drawer component contains five elements within three sections:
Header
1. Trigger: button, text link, or icon required to hide the drawer.
2. Title: headline or title.
Body
3. Description: optional introductory content.
4. Container: textual content or interactive fields.
Footer
5. Call-to-action: optional button, button group, or link.
Contents
Contents
KindsCopy link to this section
Copy link to this section
Options
Drawer with text: used to supplement information on-page that requires more space than a tooltip can offer.
Drawer with container: used when you need to include additional content like images or optional interactive elements, such as forms.
Drawer without footer: used for supplemental content or elements that don’t require a call-to-action.
SizesCopy link to this section
Copy link to this section
Drawer has four sizes: large, medium, small, and extra small.
Large drawer has a width of 1200 pixels.
Medium drawer has a width of 920 pixels.
Small drawer has a width of 560 pixels.
Extra small drawer has a width of 320 pixels.
Contents
Contents
Live demoCopy link to this section
Copy link to this section
This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.
You are now entering a live demo of the component.
<div class="dds__drawer" aria-hidden="true" data-dds="drawer" id="drawer-basic" tabindex="-1">
<div class="dds__drawer__overlay" aria-hidden="true"></div>
<div class="dds__drawer__container">
<div class="dds__drawer__header">
<button type="button" class="dds__drawer__close">Back</button>
</div>
<div class="dds__drawer__body">
<h3 class="dds__drawer__title">Default Drawer</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempor enim, ut tincidunt turpis. Nulla libero eros,
sollicitudin ac enim a, rhoncus tempus nunc. Donec suscipit lectus in mattis pretium. Aliquam massa nulla, porta id ante non,
vestibulum scelerisque nibh. Nullam aliquam diam sed volutpat laoreet. Sed faucibus velit sed interdum cursus. Curabitur turpis
lorem, sodales ultricies massa vitae, accumsan semper sapien. Maecenas sollicitudin ipsum placerat leo egestas mattis. Pellentesque
volutpat in ante eget gravida. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque
ac imperdiet elit. Nunc facilisis orci non volutpat semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Etiam eu sagittis diam, at aliquet urna. Vestibulum euismod id nisl ac consectetur. Sed turpis nulla, pellentesque
nec sem at, dignissim iaculis urna.
</p>
<p>
Morbi ut varius nibh. Donec finibus purus id nunc fermentum, ac convallis massa lobortis. Mauris sed purus mattis, rutrum dolor et,
tincidunt est. Aenean pharetra ac elit in accumsan. Morbi a tempus turpis. Nullam vel nibh nulla. Mauris maximus a nulla sit amet
tristique. Vestibulum placerat justo non cursus porta. Phasellus at iaculis nulla, ut vulputate orci. Quisque ut diam eget lectus
malesuada commodo in a velit. Nam ac risus mi. Aenean nec placerat enim. Fusce vel orci nunc. Nullam rhoncus dapibus lacinia.
Phasellus egestas ut turpis eu aliquam. Vestibulum ut libero in lacus aliquet mollis vel ullamcorper neque.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam purus elit, faucibus mattis
suscipit vitae, fermentum posuere nisl. Nam rhoncus nulla eget malesuada feugiat. Pellentesque ultrices, diam non hendrerit
convallis, augue risus posuere tortor, a tincidunt arcu eros ac elit. Morbi eget leo non dui cursus consectetur. Aenean vel felis
orci. Morbi sodales diam sit amet neque egestas, nec sodales enim pellentesque. Vestibulum eu odio porttitor, ornare est et,
facilisis justo. Integer ultricies nec tortor sed volutpat. Cras eu sapien a purus mollis auctor eu id neque. Morbi blandit sem at
arcu ornare ultrices imperdiet ac augue. Mauris rhoncus malesuada urna quis vestibulum.
</p>
<p>
Vestibulum ultricies risus id justo rhoncus lacinia. Phasellus lacinia justo hendrerit ultricies ornare. Morbi vel porttitor libero.
In gravida enim sed dictum molestie. Quisque porttitor arcu nec rhoncus varius. Mauris ex dolor, tincidunt sed lorem sed, dictum
lobortis neque. Vestibulum quis varius augue. Phasellus consectetur imperdiet dictum. Donec et ex quis turpis venenatis pellentesque
sed eu nisl. Maecenas non egestas augue. Mauris tempor ornare vehicula. Aenean posuere ipsum vulputate ultrices mollis. Vestibulum
arcu mauris, congue sed fermentum eu, placerat non sem. Maecenas enim nibh, aliquet convallis venenatis nec, venenatis ac est. Fusce
feugiat cursus eleifend. Etiam tempus maximus mauris, nec lobortis velit elementum eu.
</p>
<p>
Mauris dignissim porta felis, sit amet molestie nisi sodales aliquam. Duis sem quam, porttitor in leo non, maximus sodales justo.
Mauris id condimentum purus. Duis a velit porttitor, volutpat nulla in, blandit ante. Etiam tincidunt vulputate facilisis. Aliquam
lorem quam, aliquet et eros eu, luctus placerat nibh. Suspendisse a auctor tortor, et elementum nunc. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Fusce eu est rutrum, molestie urna nec, feugiat nibh. Donec
vulputate turpis eu elit rutrum, eget suscipit diam imperdiet. Vestibulum pulvinar ac dolor sit amet tempor. Quisque ante nulla,
dictum at libero a, volutpat ornare eros.
</p>
<p>
Sed commodo dapibus urna. Curabitur consequat, diam luctus egestas egestas, metus dui ultrices metus, eu suscipit sapien quam et
tellus. Proin ut ipsum non nunc venenatis maximus id non dolor. Morbi volutpat metus lacus. Donec euismod eros libero. Aenean
consequat metus et orci mattis, fringilla posuere velit accumsan. Praesent interdum congue libero, sit amet vehicula ipsum congue
sed. Pellentesque viverra velit lacus, eu lacinia tortor faucibus id. Praesent commodo ex a neque laoreet, convallis condimentum
ligula feugiat.
</p>
<p>
Proin eget mauris non enim fermentum porttitor quis et metus. Donec sagittis nulla dolor, eu posuere velit commodo vel. Nam quis mi
ac ligula aliquet pharetra hendrerit lacinia elit. Quisque ullamcorper lorem lectus, vel tincidunt magna ornare eget. Quisque in
ullamcorper risus, quis elementum odio. Vivamus lobortis ex quam, consectetur tincidunt lectus cursus eget. Maecenas vitae leo
cursus, consequat nisl sit amet, accumsan justo. Etiam ut ex auctor, vestibulum urna id, rhoncus urna. Vestibulum a augue aliquam,
tempor libero nec, viverra tortor.
</p>
<p>
Morbi sit amet scelerisque elit. In semper sem at rutrum laoreet. Aenean non felis pretium, sollicitudin ligula nec, dapibus ante.
In ut scelerisque ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ultrices placerat sem, nec varius justo
imperdiet ac. Ut fringilla ligula eget odio pulvinar eleifend. Vivamus quis enim vitae urna eleifend dignissim. Curabitur vulputate
condimentum facilisis.
</p>
<p>
Etiam tempor mi at erat eleifend, a finibus magna pretium. Etiam nec molestie neque. Suspendisse in risus augue. Nam congue est quis
semper pulvinar. Curabitur feugiat mattis ultrices. Fusce eu nibh pulvinar, semper augue non, sodales magna. Aliquam consequat
aliquet eleifend.
</p>
<p>
Fusce ullamcorper sapien ut dignissim lobortis. Nunc ut placerat nulla. Nullam dapibus nunc quis metus rutrum pretium. Praesent non
faucibus nunc. Donec in nunc ac mi sodales convallis. Donec tempus, risus rutrum pharetra dapibus, elit felis ultricies neque, non
tempus arcu eros a lorem. In ut convallis lacus. Suspendisse potenti. Nunc maximus maximus viverra. Fusce mollis ut mi nec
ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut elementum nisl et neque
mollis, id auctor ipsum efficitur. Curabitur tincidunt, nisl non laoreet fringilla, nisi ex finibus ipsum, sit amet condimentum
nulla leo consectetur massa. Morbi leo nulla, tincidunt id urna ut, hendrerit varius risus. In a maximus tortor. Donec eget lorem at
nulla semper convallis.
</p>
<button type="button" class="dds__button dds__button--primary dds__mr-2">Primary</button>
<button type="button" class="dds__button dds__button--secondary">Secondary</button>
</div>
</div>
</div>