Drawers

Drawers are collapsible containers – visitors can click to show or hide the contents of a drawer. They’re often used for presenting content such as FAQs, where details can be hidden until activated.

Use Drawers With Caution. It’s important to note that even if you use a drawer to make page content appear shorter, all of the content inside the drawer still has to load in order for the page to be displayed. (If you include a megabyte of text and a collection of images inside a drawer, it may take some time.) Also, while the drawers have been tested to ensure accessibility, they don’t offer an ideal experience for screen reader users.

Open and Closed Drawers

Drawers are a good choice for hiding content that will only be viewed intermittently. You can use the open attribute to have a drawer be open by default.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida dignissim porta. Etiam sollicitudin mattis erat, vitae volutpat risus dictum et. Praesent nisi dolor, suscipit sed enim non, tincidunt auctor ex. Phasellus tempus augue dolor, ut porta justo ultrices pellentesque. Nam ut ante vitae nisl mollis aliquam. Nullam nec dolor sapien. Vestibulum tempor sapien non pretium varius. Fusce vulputate nibh nec mauris pellentesque posuere.

Praesent efficitur finibus lorem, a elementum magna pellentesque sit amet. Mauris posuere lectus ac enim faucibus, quis faucibus erat luctus. Nullam vitae neque condimentum, semper nulla in, egestas nulla. Nunc gravida, mi ut ullamcorper dictum, lacus nibh placerat erat, quis luctus nunc erat efficitur quam. Phasellus tellus augue, sagittis auctor pharetra dapibus, accumsan sed velit. Suspendisse at pulvinar justo, eget tempor mauris. Pellentesque ipsum enim, rutrum a ultrices non, ullamcorper interdum sem. Phasellus vitae risus vel ex lacinia vehicula. Vivamus euismod, lorem nec faucibus vestibulum, nisi dui tristique sem, a ultrices lacus erat ut tellus. Quisque laoreet enim id metus feugiat suscipit.

If you link to an anchor inside a drawer, the drawer will be open when the page loads. Open this link in a new tab.

Attributes

Name	Possible Values	Required	Notes
label	text	Yes	Displayed on the drawer open/close header
open	true or false	No	The drawer’s default state (defaults to false)

Code Samples

Open Drawer

[[drawer label="Hello World" open="true"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

[/drawer]]

Closed Drawer

[[drawer label="Hello World"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

[/drawer]]