Components

Desktop, Tablet & MobileOverlays

An overlay is a layer or small window over a page. Overlays give the user additional information without leaving the current task or workflow. Demo Overlay (Small) and Demo Overlay (Small White Background) should be used for cart checkout, coupons, and products depending upon the design needs.

• Neutral Default Overlay ‑ max-width: 750px

  Neutral overlay Opens simulated dialog

  Code

  <button type="button" class="btn btn__blue action__open-modal">
    <span>Demo overlay</span>
    <span class="sr-only">Opens simulated dialog</span>
  </button>
  
  <section id="dialog" class="modal" role="dialog" tabindex="-1" hidden>
    <div class="modal__content-contain">
      <span class="sr-only">Beginning of the content</span>
  
      <button type="button" class="btn btn__rounded btn__white action__close-modal">
        <span class="icon">
          <svg alt=""><use xlink:href="/images/adaptive/livestyleguide/walgreens.com/v3.0/themes/images/icons/symbol-defs.svg#icon__dismiss-v2"></use></svg>
        </span>
      </button>
  
      <div class="modal__content">
        <h2>Overlay title</h2>
  
        <div class="modal__content-inner">
  
          <p>Overlay paragraph</p>
  
        </div>      
  
        <div class="modal__bottom-actions">
          <button type="button" class="btn btn__blue action__close-modal">Close</button>
        </div>
      </div>
      <span class="sr-only">End of the content</span>
    </div>
  
    <div class="overlay action__close-modal"></div>
  </section>

• White Default Overlay ‑ max-width: 750px

  White overlay Opens simulated dialog

  Code

  <button type="button" class="btn btn__blue action__open-modal-white">
    <span>Demo overlay</span>
    <span class="sr-only">Opens simulated dialog</span>
  </button>
  
  <section id="dialog" class="modal-white" role="dialog" tabindex="-1" hidden>
    <div class="modal__content-contain modal__white">
      <span class="sr-only">Beginning of the content</span>
  
      <button type="button" class="btn btn__rounded btn__blk action__close-modal-white">
        <span class="icon">
          <svg alt=""><use xlink:href="/images/adaptive/livestyleguide/walgreens.com/v3.0/themes/images/icons/symbol-defs.svg#icon__dismiss-v2"></use></svg>
        </span>
      </button>
  
      <div class="modal__content">
        <h2>Overlay title</h2>
  
        <div class="modal__content-inner">
  
          <p>Overlay paragraph</p>
  
        </div>      
  
        <div class="modal__bottom-actions">
          <button type="button" class="btn btn__blue action__close-modal-white">Close</button>
        </div>
      </div>
      <span class="sr-only">End of the content</span>
    </div>
  
    <div class="overlay action__close-modal-white"></div>
  </section>

• Neutral Small Overlay ‑ max-width: 500px

  Small neutral overlay Opens simulated dialog

  Code

  <button type="button" class="btn btn__blue action__open-modal-small">
    <span>Demo overlay</span>
    <span class="sr-only">Opens simulated dialog</span>
  </button>
  
  <section id="dialog" class="modal-small" role="dialog" tabindex="-1" hidden>
    <div class="modal__content-contain modal__small">
      <span class="sr-only">Beginning of the content</span>
  
      <button type="button" class="btn btn__rounded btn__white action__close-modal-small">
        <span class="icon">
          <svg alt=""><use xlink:href="/images/adaptive/livestyleguide/walgreens.com/v3.0/themes/images/icons/symbol-defs.svg#icon__dismiss-v2"></use></svg>
        </span>
      </button>
  
      <div class="modal__content small">
        <h2>Overlay title</h2>
  
        <div class="modal__content-inner">
  
          <p>Overlay paragraph</p>
  
        </div>      
  
        <div class="modal__bottom-actions">
          <button type="button" class="btn btn__blue action__close-modal-small">Close</button>
        </div>
      </div>
      <span class="sr-only">End of the content</span>
    </div>
  
    <div class="overlay action__close-modal-small"></div>
  </section>

• White Small Overlay ‑ max-width: 500px

  Small white overlay Opens simulated dialog

  Code

  <button type="button" class="btn btn__blue action__open-modal-small-white">
    <span>Demo overlay</span>
    <span class="sr-only">Opens simulated dialog</span>
  </button>
  
  <section id="dialog" class="modal-small-white" role="dialog" tabindex="-1" hidden>
    <div class="modal__content-contain modal__small modal__white">
      <span class="sr-only">Beginning of the content</span>
  
      <button type="button" class="btn btn__rounded btn__blk action__close-modal-small-white">
        <span class="icon">
          <svg alt=""><use xlink:href="/images/adaptive/livestyleguide/walgreens.com/v3.0/themes/images/icons/symbol-defs.svg#icon__dismiss-v2"></use></svg>
        </span>
      </button>
  
      <div class="modal__content small">
        <h2>Overlay title</h2>
  
        <div class="modal__content-inner">
  
          <p>Overlay paragraph</p>
  
        </div>      
  
        <div class="modal__bottom-actions">
          <button type="button" class="btn btn__blue action__close-modal-small-white">Close</button>
        </div>
      </div>
      <span class="sr-only">End of the content</span>
    </div>
  
    <div class="overlay action__close-modal-small-white"></div>
  </section>

Desktop, Tablet & MobileOverlays: Full Page

An Full Page Overlay is a full takeover of the page view. It is reserved for specific user flow step processes.

• Full page overlay Opens simulated dialog

  Code

  <button type="button" class="btn btn__blue action__open-modal-small-white">
    <span>Demo overlay</span>
    <span class="sr-only">Opens simulated dialog</span>
  </button>
  
  <section id="dialog" class="modal-small-white" role="dialog" tabindex="-1" hidden>
    <div class="modal__content-contain modal__small modal__white">
      <span class="sr-only">Beginning of the content</span>
  
      <button type="button" class="btn btn__rounded btn__blk action__close-modal-small-white">
        <span class="icon">
          <svg alt=""><use xlink:href="/images/adaptive/livestyleguide/walgreens.com/v3.0/themes/images/icons/symbol-defs.svg#icon__dismiss-v2"></use></svg>
        </span>
      </button>
  
      <div class="modal__content small">
        <h2>Overlay title</h2>
  
        <div class="modal__content-inner">
  
          <p>Overlay paragraph</p>
  
        </div>      
  
        <div class="modal__bottom-actions">
          <button type="button" class="btn btn__blue action__close-modal-small-white">Close</button>
        </div>
      </div>
      <span class="sr-only">End of the content</span>
    </div>
  
  </section>

Desktop, Tablet & MobileFacets

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• • Facet One
  • Facet Two
  • Facet Three
  • Facet Four
  • Facet Five

  • Facet One
  • Facet Two
  • Facet Three
  • Facet Four
  • Facet Five

  Code

  <ul class="facets">
    <li class="facet" tabindex="0" role="button">
      <span class="icon icon__facet"></span>
      <span>Facet Title</span>
    </li>
  <ul>

Desktop, Tablet & MobileUndo

State that changes as an ability to allow the user to undo an action.

• • Bacitracin Ointment 30mg
  • Ibuprofen 400 mg Tablets
  • Re-drylex Syrup 473ml

  Code

  <ul class="facets">
  
    <li class="facet product" tabindex="0" role="button">
      <span class="icon icon__facet product"></span>
      <span>Facet Title</span>
    </li>
  
  <ul>

Multi-card carousel

A Carousel can appear when multiple promotional spots, product shots or other images need to be displayed in a timed slide show. Note: Grey box on right side and left slides containing arrows.

Code

 <div class="slider__wrap">
  <div class"slider">

    // Content that lives inside of the carosel is wrapped in this tag
    <div class="carousel-cell"></div>

  </div>
</div>

Desktop, Tablet & MobileSingle Carousel

A Carousel can appear when multiple promotional spots, product shots or other images need to be displayed in a timed slide show. Note: Grey box on right side and left slides containing arrows.

Code

 <div class="slider__wrap">
  <div class"slider slider__full-width slider__with-dots">

    // Content that lives inside of the carosel is wrapped in this tag
    <div class="carousel-cell">
      <div class="slider__info">
        <figure><img src="../../themes/images/components/app.jpg" alt=""></figure>
        <figcpation>
          <We'll let you know when your RX is ready.>
          <span>We will text this number (555) 555-5555</span>
        </figcaption>
      </div>
    </div>

  </div>
</div>

Desktop, Tablet & MobileTabs

Tabs fit multiple content views on one page, allowing the user to tab through content without leaving the page. Left Aligned Tabs are suitable to use on desktop and tablet.

• • Tab Item 1
  • Tab Item 2 (100)
  • Tab Item 3
  • Tab Item 4

  Code

  <ul class="tabs" role="tablist">
  
    // For the selected tabs
    <li class="selected" role="presentation">
      <a href="#!" aria-selected="true" role="tab"><strong>Tab name<span>(100)</span></strong></a>
    </li>
  
    // For the unselected tabs
    <li role="presentation">
      <a href="#!" aria-selected="false" role="tab"><strong>Tab name</strong></a>
    </li>
  
  </ul>

Desktop, Tablet & MobileAccordions / FAQ

Accordions are vertical lists of items that can either be expanded to reveal nested content or collapsed into rows of cells with titles. Use an accordion when data and information must be compressed to fit a limited space.

• • Lorem Ipsum

    Maecenas magna nisi, convallis a pharetra in, bibendum sed erat. Suspendisse potenti. Aliquam tristique dui. bibendum sed erat.

  • Lorem Ipsum

    Maecenas magna nisi, convallis a pharetra in, bibendum sed erat. Suspendisse potenti. Aliquam tristique dui. bibendum sed erat.

  • Lorem Ipsum

    Maecenas magna nisi, convallis a pharetra in, bibendum sed erat. Suspendisse potenti. Aliquam tristique dui. bibendum sed erat.

  • Lorem Ipsum

    Maecenas magna nisi, convallis a pharetra in, bibendum sed erat. Suspendisse potenti. Aliquam tristique dui. bibendum sed erat.

  Code

  // 1 lvl deep accordion
  <ul class="accordion">
    <li>
      <a class="toggle title__master" href="#!">
        <strong>Lorem ipsum</strong>
        <figure class="icon icon__font icon__arrow">TBD</figure>
      </a>
  
      <div class="inner">
        <p>
          Answer text goes here
        </p>
      </div>
    </li>
  </ul>
  
  // Nested accordion
  <ul class="accordion">
    <li>
      <a class="toggle title__master" href="#!">
        <strong>Lorem ipsum</strong>
        <figure class="icon icon__font icon__arrow">TBD</figure>
      </a>
  
      <ul class="inner">
        <li>
          <a href="#" class="toggle">
            <Sit dolor amet>
            <figure class="icon icon__font icon__arrow">TBD</figure>
          </a>
  
          <div class="inner">
            <p>
              Answer text goes here
            </p>
          </div>
        </li>
      </ul>
    </li>
  </ul>

Desktop, Tablet & MobileShow More

Show more / show less allows for certain content to be hidden below other various forms of content.

• • This is your summary content...

    Lorem ipsum dolor amet

    Show more

  Code

  // View more / View Less
  <ul class="accordion view-more">
    <li>
      <div class="view-more-container">
  
         <div class="summary">
           <p>Lorem ipsum</p>
         </div>
      
  
         <div class="view-more-content">
          <p>Lorem ipsum<</p>
        </div>
  
        <a href="#!" class="view-more-trigger">View more</a>
  
      </div>
  
    </li>
  </ul>

Desktop, Tablet & MobileDrawers

• This is the title of the drawer

  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 aliquip ex ea commodo consequat.

  Code

  <div class="drawer drawer__neutral">
    <span class="drawer__title">
      <strong>Drawer title goes here</strong>
      <span class="icon icon__arrow-down">
        <svg alt=""><use xlink:href="/images/adaptive/livestyleguide/walgreens.com/v3.0/themes/images/icons/symbol-defs.svg#icon__arrow-down"></use></svg>
      </span>
    </span>
  
    <p>
      // Text for the drawer
      <a href="#!">CTA link within the drawer</a>
    </p>
  </div>

Desktop, Tablet & MobileRadio Buttons

Radio Buttons are selectable elements that offer the user a mutually exclusive choice. At default state, one button is selected and the rest are unselected.

<fieldset>
  <div class="btn__radio">
    <input id="radio-1" name="radio" type="radio" tabindex="0">
    <label for="radio-1"><span class="radio"></span><span>Text</span></label>
  </div>
</fieldset>

Desktop, Tablet & MobileCheck Boxes

Check Boxes are selectable elements that offer the user one or more optional choices that are not mutually exclusive.

<fieldset>
  <div class="check-box">
    <input tabindex="0">
    <label for="check-one"><span class="check"></span><span>Text</span></label>
  </div>
</fieldset>

Desktop, Tablet & MobileCheck Boxes: Transactional

These check boxes should only be used for transactional interactions.

<fieldset>
  <div class="check-box check-box__green">
    <input id="check-one" type="checkbox">
    <label for="check-one"><span class="check"></span><span>Text</span></label>
  </div>
</fieldset>

Desktop, Tablet & MobileColor Swatch Selectors

The circle color swatch selectors are Radio Buttons. They are selectable elements that offer the user a mutually exclusive choice. At default state, one button is selected and the rest are unselected.

// Colors within swatches should be written inline, instead of bloating the css
<ul class="swatches">
  <li><a href="#! "title="Color" style="background-color: #color-code-goed-here"></a></li>
  <li><a href="#!" title="Color" style="background-color: #add-more-colors"></a></li>
</ul>

Desktop, Tablet & MobileToggles

Toggles are selectable elements that offer the user the ability to show or hide additional information.

• • Toggle off
  • Toggle on
  • Toggle off - disabled
  • Toggle on - disabled

  Code

  <!-- Default toggle -->
  <span class="toggle-btn">
    <button class="btn__toggle"><span></span></button>
    <span class="toggle__title">Toggle title<span>
  </span>
  
  <!-- Default toggle on by default -->
  <span class="toggle-btn">
    <button class="btn__toggle toggle__on"><span></span></button>
    <span class="toggle__title">Toggle title<span>
  </span>
  
  <!-- Disabled toggle -->
  <span class="toggle-btn">
    <button class="btn__toggle toggle__disabled"><span></span></button>
    <span class="toggle__title">Toggle title<span>
  </span>
  
  <!-- Disabled toggle on by default -->
  <span class="toggle-btn">
    <button class="btn__toggle toggle__on toggle__disabled"><span></span></button>
    <span class="toggle__title">Toggle title<span>
  </span>

Desktop, Tablet & MobileProgress Bar

Progress Bars should be used for step-based user flows. There is a maximum of 5 steps that can be used for progress bars. Mobile only displays the current step while Desktop displays all steps.

• • • Decide to quit
    • Understand your habit
    • Talk to an expert
    • Get quit support
    • Step 5

  Code

  <div class="progress-bar">
    <ul class="dots">
     <li class="current"></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
    <ul class="dots">
     <li class="current" id="1">Step 1</li>
     <li id="2">Step 2</li>
     <li id="3">Step 3</li>
     <li id="4">Step 4</li>
     <li id="5">Step 5</li>
    </ul>
  </div>

Desktop, Tablet & MobileSliders

Sliders are used as an interactive elements on a page. Single sliders are best used as a visual quantification that filters additional information.

• Code
  Code

  <div class="slider__drag-vertical"><input type="text" id="slider__number-vertical" readonly></div>

Desktop, Tablet & MobileLoading Dots

An image loader animation can help ensure that users are aware that content is loading. Use an image loader animation where pages contain multiple product imagery.

<figure class="loading__dots"><span></span></figure>

Desktop, Tablet & MobileCards

When using a card that appears on a neutral background the border of the card should have box shadow: 0 1px 2px rgba(207,207,207,0.5). This is the default provided by the .card class. When using a card that appears on a white background the border should have 1px of Stroke Gray (#CFCFCF). This can be acheived by adding the class .card__border to the card div. Card content should have padding around it provided by the .contain class which can be placed on a div within the card div.

• • Title Subtitle
  • Title Subtitle

  Code

  <ul class="card-list">
   <li class="on-neutral-background">
    <div class="card card-on-neutral-bkgd">
     <div class="contain">
      <div class="card__title">
       <span>Title</span>
       <span class="card__subtitle">Subtitle</span>
      </div>
     </div>
    </div>
   </li>
  
   <li>
    <div class="card card__border">
     <div class="contain">
      <div class="card__title">
       <span><strong>Title</strong></span>
       <span class="card__subtitle">Subtitle</span>
      </div>
     </div>
    </div>
   </li>
  </ul>

Cards may have title text within them by placing text within a dom element which has the .card__title class while a subtitle can be added via the .card__subtitle class. The .card__title class includes 30px of padding on the bottom while the .card__subtitle does not.

• • Title

    Subtitle text
  • Title on Blue Card

    Subtitle text
  • Title on Pink Card

    Subtitle text

  Code

  <ul class="card-list">
   <li>
    <div class="card card__neutral">
     <div class="contain">
      <div class="card__title">
       Title
      </div>
      <span class="card__subtitle">
       Subtitle text
      </span>
     </div>
    </div>
   </li>
   <li>
    <div class="card card__blue">
     <div class="contain">
      <div class="card__title">
       Title on Blue Card
      </div>
      <span class="card__subtitle">
       Subtitle text
      </span>
     </div>
    </div>
   </li>
   <li>
    <div class="card card__pink">
     <div class="contain">
      <div class="card__title">
       Title on Pink Card
      </div>
      <span class="card__subtitle">
       Subtitle text
      </span>
     </div>
    </div>
   </li>
  </ul>

Cards with colored background may appear on a variety of pages but typically are restricted to being nuetral, blue, or pink in color. This coloring can be acheived by adding .card__neutral, .card__blue, or .card__pink to the card dom element. For blue and pink cards, the .card__title and .card__subtitle are automatically turned white.

To use cards with the grid system, place the class .wag-row on the ul dom element that also receives the .card-list class. Then, place the desired column width (i.e. wag-col-4) on the li dom element that contains the div.card element within it. The width of the div.card element is 100% so it will expand to fill the area of it's parent li element.

• • 2 Column Card
  • 4 Column Card
  • 6 Column Card

    Subtitle test

  Code

  <ul class="card-list wag-row wag-grid__add-gutters wag-grid__stretch-col-height">
   <li class="wag-col-2">
    <div class="card card__border">
     <div class="contain">
      <div class="card__title">
       2 Column Card 
      </div>
     </div>
    </div>
   </li>
   <li class="wag-col-4">
    <div class="card card__border">
     <div class="contain">
      <div class="card__title">
       4 Column Card 
      </div>
     </div>
    </div>
   </li>
   <li class="wag-col-6">
    <div class="card card__border">
     <div class="contain">
      <div class="card__title">
       6 Column Card
      </div>
      <span class="card__subtitle">
       Subtitle test 
      </span>
     </div>
    </div>
   </li>
  </ul>

Desktop, Tablet & MobileProduct Lists

• • 

    OGX Hydrating Teatree Mint Shampoo Refreshing and Fragrancies 50 fl oz

    

    ^$19⁹⁹ 19 dollar and 99 cents $1.00 / oz $9.99

    Find at a store Add to cart

    Compare

  • 

    Not sold in stores Add to cart

    Compare

  • 

    Find at a store Not available online

    Compare

  Code

  <ul class="product-list product-list__three-columns">
    <li>
      <div class="carousel-cell product-card">
        <a href="#!">
          <div class="product">
            <figure class="product__img"><img src="path-to-img"></figure>
  
            <figcaption>
              <span class="check-box">
                <input type="checkbox">
                <label><figure class="check"></figure><span>Compare</span></label>
              </span>
  
              <span class="product__title">
                <strong>Product title</strong>
                <span>50 fl oz</span>
              </span>
  
              <span class="product__rating">
                <figure><img src="star-rating-img"></figure>
                <figcaption>(# of reviews)</figcaption>
              </span>
  
              <span class="product__price-contain">
                <span class="product__price product__price-red"><sup>$</sup>9<sup>99</sup></span>
                <span class="product__weight">$1.00 / oz</span>
                <span class="product__price-sale">$9.99</span>
              </span>
            </figcaption>
          </div>
        </a>
  
        <div class="product__buttons">
          <button class="btn btn__neutral btn__neutral-blue">secondary action</button>
          <button class="btn btn__blue">Primary action</button>
        </div>
      </div>
    </li>
  </ul>

Desktop, Tablet & MobileCart Product Card

• • 

    Biofinity Toric XR Right (OD)

    • Power: -00.25
    • BC: 8.7
    • DIA: 14.5
    • CYL: -3.75
    • Axis: 30
    • Color: HndlTint

    $135.00

    • Save for later
    • Remove

    ^$135 ⁰⁰ 135 dollar and 00 cents

    • Ship to you
    • Ship to Store Details

    • Allow 1-3 business days for prescription verification and 4 business days for shipping.

    • Contact lens prescription information will be faxed to the patient's doctor for verification. This may take 1-3 business days.

    For any questions, please visit our Contact Lens FAQ

• • 

    Biofinity Toric XR Right (OD)

    • Power: -00.25
    • BC: 8.7
    • DIA: 14.5
    • CYL: -3.75
    • Axis: 30
    • Color: HndlTint

    $135.00

    • Remove

    ^$135 ⁰⁰ 135 dollar and 00 cents

    • Ship to you
    • Ship to Store Details

    • Arrives in 1-3 business days*

    • Auto-reorder and save

    Ship: Once Twice Three times a lady

    For any questions, please visit our Contact Lens FAQ

Desktop, Tablet & MobileCoupon Results

• • 

    Expires 01/27/18

    $1 Off with card

    Gain

    One Gain Detergent and Fabric Enhancers (excludes trial/travel sizes)

    View Details

    Clip

    Clipped

    Shop
  • 

    Expires 01/27/18

    Colgate® Mouthwash

    Gain

    On any Colgate® Total or Colgate® Optic White® Mouthwash 32oz. or larger

    View Details

    Clip

    Clipped

    Shop

  Code

  <div class="card card__coupon">
    <div class="card__content">
      <a href="#!" class="content__inline">
        <div class="img__contain"><img src="path-to-img"></div>
        <div>
          <div class="card__item">
            <div class="font__fourteen">Expires 01/27/18</div>
            <div><strong class="font__eighteen text-color__red">Colgate® Mouthwash</strong></div>
            <div><strong class="font__eighteen">Gain</strong></div>
          </div>
          <div class="card__item coupon__descp text-color__black>On any Colgate® Total or Colgate® Optic White® Mouthwash 32oz. or larger</div>
          <div class="card__item>View Details</div>
        </div>
      </a>
  
      <div class="btn__pair">
        <a href="#!" role="button" class="btn__clip">
          <span class="btn btn__blue">
            <span class="animate__out">Clip</span>
  
            <div class="btn__animate-up">
              <span class="icon icon__check">
                <svg aria-label="Confirm"><use xlink:href="/images/adaptive/livestyleguide/walgreens.com/v3.0/themes/images/icons/symbol-defs.svg#icon__check"></use></svg>
              </span>
              <span>Clipped</span>
            </div>
          </span>
        </a>
        <a href="#!" role="button"><span class="btn btn__tint-blue">Shop</span></a>
      </div>
    </div>
  </div>

Desktop, Tablet & MobilePrestige

Use only when designing for the Presitege page - primary use of black for special call-to-actions and reviews of products. This is different from other buttons by removing gradients, and implimenting a solid, black color.

• Button

  Code

  <button class="btn btn__black">Action</button>

•