Drawer

Overview

A drawer is used to progressively reveal more content to a user when they've requested it – revealing more detailed information that relates to a particular topic or section. Drawers allow for content to be displayed in a contextual fashion to avoid overloading the user with information.

From a functional perspective, drawers always work in conjunction with a functional blue (+/-) button that expands an area. The information importance will dictate the level of colour contrast of the drawer container in relation to the background colour. The drawer will always animate when opened and closed.

Positioning the drawer arrow

Positioning the arrow with CSS currently requires manually moving the triangle pseudo-element. You may also have to specify the triangle location for different breakpoints to make sure the triangle aligns for every screen size.


/* To change position dynamically */
.am-content-drawer:after {
  left: 85px;
}

There are 3 types of drawer styles: Basic, basic with header, basic with footer.

1. Basic drawer

Styling & specs

Basic drawers expand the full width of the page and are made up of an triangle indicator, a content box and a close button. The tip of the triangle is positioned in relation to where the blue (+/-) button is positioned on the page. The colour of the background shape can vary and is contextual – chosen based on the level of importance of the information being displayed as well as working with other elements on a page. However, all colours used need to meet accessibility colour standards.

Example: Basic drawer styling on a white background

The active area styling within the drawer is flexible to accommodate various types of content. For active area styling examples, see references in the panel section.

Learn more
Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies, tempor morbi ultricies mauris orci nam etiam, diam eget arcu turpis totam. Augue varius, varius ut, ligula sed proin sodales, in vestibulum a eros.
<a class="am-functional-button">
  <span class="am-functional-button__text">Learn more</span>
  <span class="am-icon-button am-icon-button--primary am-functional-button--right">
    <span class="am-icon am-icon-functional-minus"></span>
  </span>
</a>
<div class="am-content-drawer am-content-drawer--light">
  <div class="am-content-drawer__pane am-content-drawer__pane--light">
    <button class="am-icon-button am-icon-button--white am-icon-button--small am-content-drawer__close-button">
      <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
    Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam...
  </div>
</div>

Usage on a coloured background

When using basic drawers on coloured backgrounds, the triangle indicator should center to the container the blue (+/-) button is within. The dimensions and animations of the drawer itself remain the same.

To provide creative flexibility, the background and container colour usage can vary depending on the scenario, however all colours that are chosen must be from the AIR MILES brand colour palette.

Learn more
Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies, tempor morbi ultricies mauris orci nam etiam, diam eget arcu turpis totam. Augue varius, varius ut, ligula sed proin sodales, in vestibulum a eros. Eros sit vel convallis vestibulum, mauris praesent vitae ornare in sem sit, in duis aliquam, arcu quam, neque conubia eleifend sed ut.
<!-- Call to action -->
<a class="am-functional-button">
  <span class="am-functional-button__text">Learn more</span>
    <span class="am-icon-button am-icon-button--primary am-functional-button--right">
      <span class="am-icon am-icon-functional-minus"></span>
  </span>
</a>

<!-- Content drawer -->
<div class="am-content-drawer am-content-drawer--white">
  <div class="am-content-drawer__pane">
    <button class="am-icon-button am-icon-button--dark am-icon-button--small am-content-drawer__close-button">
      <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
    Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem...
  </div>
</div>

2. Basic drawer with header

Styling & specs

A drawer with a header is used when the information in the drawer requires context or an introduction.

Headers use H2 font sizing, and text must fit on one line when viewed on a desktop experience. The colour of the header area should be heavier / darker than the active content area below it.

There needs to be a noticeable colour contrast between the drawer active area and the header area, and all colours used need to meet accessibility colour standards.

Example: Basic drawer with header on a white background

Learn more

Header 2 text goes here. Centered aligned to the header box

Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies, tempor morbi ultricies mauris orci nam etiam, diam eget arcu turpis totam. Augue varius, varius ut, ligula sed proin sodales, in vestibulum a eros.


Eros sit vel convallis vestibulum, mauris praesent vitae ornare in sem sit, in duis aliquam, arcu quam, neque conubia eleifend sed ut. Molestie curabitur egestas sit ligula ut tortor, posuere turpis neque, mattis accumsan taciti elit, hac tempus amet placerat, odio vestibulum feugiat feugiat vestibulum. Lacus vel sociis.


<!-- Light content drawer, with header, no footer -->
<a class="am-functional-button">
  <span class="am-functional-button__text">Learn more</span>
  <span class="am-icon-button am-icon-button--primary am-functional-button--right">
    <span class="am-icon am-icon-functional-minus"></span>
  </span>
</a>
<div class="am-content-drawer am-content-drawer--dark">
  <div class="am-content-drawer__header">
    <h2 class="am-content-drawer__header-title">
      Header 2 text goes here. Centered aligned to the header box.
    </h2>
    <button class="am-icon-button am-icon-button--light am-icon-button--small am-content-drawer__close-button">
      <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
  </div>
  <div class="am-content-drawer__pane am-content-drawer__pane--light am-content-drawer__pane--has-header">
    Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam.
  </div>
</div>

Example: Basic drawer with header on a coloured background

Learn more

Header 2 text goes here.

Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies, tempor morbi ultricies mauris orci nam etiam, diam eget arcu turpis totam. Augue varius, varius ut, ligula sed proin sodales, in vestibulum a eros. Eros sit vel convallis vestibulum, mauris praesent vitae ornare in sem sit, in duis aliquam, arcu quam, neque conubia eleifend sed ut. Molestie curabitur egestas sit ligula ut tortor, posuere turpis neque, mattis accumsan taciti elit, hac tempus amet placerat, odio vestibulum feugiat feugiat vestibulum. Lacus vel sociis. Provident pellentesque, urna imperdiet orci luctus tincidunt a vivamus, condimentum lacus vehicula velit.
<!-- Call to action -->
<a class="am-functional-button">
    <span class="am-functional-button__text">Learn more</span>
    <span class="am-icon-button am-icon-button--primary am-functional-button--right">
        <span class="am-icon am-icon-functional-minus"></span>
    </span>
</a>
<!-- Content Drawer -->
<div class="am-content-drawer am-content-drawer--dark">
      <div class="am-content-drawer__header">
        <h2 class="am-content-drawer__header-title">
            Header 2 text goes here. Centered aligned to the header box.
        </h2>
    <button class="am-icon-button am-icon-button--light am-icon-button--small am-content-drawer__close-button">
        <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
      </div>
     <div class="am-content-drawer__pane am-content-drawer__pane--light am-content-drawer__pane--has-header">
        Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam.

      Posuere natoque justo, nonummy ultricies, tempor morbi ultricies mauris orci nam etiam, diam eget arcu turpis totam. Augue varius, varius ut, ligula sed proin sodales, in vestibulum a eros. Eros sit vel convallis vestibulum, mauris praesent vitae ornare in sem sit, in duis aliquam, arcu quam, neque conubia eleifend sed ut. Molestie curabitur egestas sit ligula ut tortor, posuere turpis neque, mattis accumsan taciti elit, hac tempus amet placerat, odio vestibulum feugiat feugiat vestibulum. Lacus vel sociis. Provident pellentesque, urna imperdiet orci luctus tincidunt a vivamus, condimentum lacus vehicula velit.
     </div>
</div>

A drawer with a footer is used to display content with a strong CTA (call to action) that is related to the content within the drawer. The footer area communicates clearly one desired action for the user to do, and is not an area to be used for multiple links. For simplicity and clarity for the user, only one message is allowed in this footer space.

Footers use H4 font styling, and must fit on one line when viewed on a desktop experience. There should be noticeable colour contrast between the drawer active area and the footer area, and all colours used need to meet accessibility colour standards.

Learn more
Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies, tempor morbi ultricies mauris orci nam etiam, diam eget arcu turpis totam. Augue varius, varius ut, ligula sed proin sodales, in vestibulum a eros.

Eros sit vel convallis vestibulum, mauris praesent vitae ornare in sem sit, in duis aliquam, arcu quam, neque conubia eleifend sed ut. Molestie curabitur egestas sit ligula ut tortor, posuere turpis neque, mattis accumsan taciti elit, hac tempus amet placerat, odio vestibulum feugiat feugiat vestibulum. Lacus vel sociis.

<!-- Call to action functional button -->
<a class="am-functional-button">
  <span class="am-functional-button__text">Learn more</span>
  <span class="am-icon-button am-icon-button--primary am-functional-button--right">
    <span class="am-icon am-icon-functional-minus"></span>
  </span>
</a>

<!-- Content Drawer with Footer -->
<div class="am-content-drawer am-content-drawer--light">
  <div class="am-content-drawer__pane am-content-drawer__pane--light">
    Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. ...
    <button class="am-icon-button am-icon-button--white am-icon-button--small am-content-drawer__close-button">
      <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
  </div>
  <div class="am-content-drawer__footer">
    <div class="am-content-drawer__footer-left">
      <strong>Ready to go?</strong> Let's get started lorem ipsum dolor sit amet.
    </div>
    <div class="am-content-drawer__footer-button">
      <button class="am-button am-button--primary-white">Lorem ipsum</button>
    </div>
  </div>
</div>
Learn more

Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies, tempor morbi ultricies mauris orci nam etiam, diam eget arcu turpis totam. Augue varius, varius ut, ligula sed proin sodales, in vestibulum a eros.

Provident pellentesque, urna imperdiet orci luctus tincidunt a vivamus, condimentum lacus vehicula velit.

<!-- Call to action -->
<a class="am-functional-button">
  <span class="am-functional-button__text">Learn more</span>
  <span class="am-icon-button am-icon-button--primary am-functional-button--right">
    <span class="am-icon am-icon-functional-minus"></span>
  </span>
</a>

<!-- Content drawer with footer -->
<div class="am-content-drawer am-content-drawer--white">
  <div class="am-content-drawer__pane am-content-drawer__pane--white">
    Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. ...
    <button class="am-icon-button am-icon-button--secondary am-content-drawer__close-button">
      <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
  </div>
  <div class="am-content-drawer__footer">
    <div class="am-content-drawer__footer-left">
      <strong>Ready to go?</strong> Let's get started lorem ipsum dolor sit amet.
    </div>
    <div class="am-content-drawer__footer-button">
      <button class="am-button am-button--primary-white">Lorem ipsum</button>
    </div>
  </div>
</div>