Category Navigation is a contextual vertical display of product categories and subcategories. It appears as a left rail on desktop and tablet, but adapts to full width on mobile.
<div class="menu__mobile"> <span class="menu__mobile-title">Immunization Services</span> <ul class="nav__category"> <li class="nav__selected">Immunization services</a></li> <li><a href="#!">Lorem Ipsum</a></li> <li><a href="#!">Add more to the list</a></li> </ul> </div>
Desktop, Tablet & MobileNavigation: Breadcrumbs
Breadcrumbs are links that are used on every page to surface a user's location within website hierarchy. Breadcrumbs are organized level by level, starting with the Home page and ending with the previous page.
Title of Current Page
<ul class="nav__bread-crumbs"> <li><a href="#!">Breadcrumb</a></li> <li><a href="#!">Add more breadcrumbs</a></li> </ul>
Pagination allows customers to page through product lists or other multipage content. It uses the Blue Primary buttons with Right/Left Chevrons, visual clickable cues that allow the reader to page forward or back.
The Sticky Bar navigates users by a creating a specific path based on their selections. The sticky bar should awlays stick to the bottom of the browser window.
HTML forms are used to collect user input and pass data along to a server. By default all text fields are required; optional text fields should include “(Optional)” text after the form label. Good structure clearly leads the user through each element and illuminates a path to completion, and form field widths should attempt to match the intended input length. Designers should stack form fields and may use two widths: 100% or 50% of the column span. It is up to the designer’s discretion to determine which style is best based on page context and spatial limitations.
// 50% width input and not required <div class="form__input input__fifty-fifty"> <span class="input__contain"> <input type="text" id="dob" name="date" aria-label="please enter date of birth in 2 digits for month 2 digits for days 4 digits for year" placeholder="MM/DD/YYYY" maxlength="10" required> <label class="input__title" for="dob">Date of Birth</label> </span> </div>
// 50% width input and not required <div class="form__input input__fifty-fifty"> <span class="input__contain"> <input type="text" id="dob" name="date" aria-label="please enter date of birth in 2 digits for month 2 digits for days 4 digits for year" placeholder="MM/DD/YYYY" maxlength="10" required> <label class="input__title" for="dob">Date of Birth</label> </span> </div>
</form>
Desktop, Tablet & MobileForm Field: Credit Card
Credit card form fields are used to collect the users purchase information. This is special styling that differs from the other form field in the sense of displying the experation date inline to simplify.
HTML forms are used to collect user input and pass data along to a server. Good structure leads the user through each element and clearly illuminates a path to completion. It is up to the designer’s discretion to determine which style is best based on page context and spatial limitations.
// For neutral background text areas <form class="form__on-light-bg"> <div class="form__input"> <span class="input__text-area"> <label class="input__title" for="textarea">Notes to pharmacy staff</label> <textarea type="text" name="text" id="textarea" required="true" placeholder="e.g. Please add bubble gum flavoring to the amoxicillin"></textarea> <span class="character-count">300 characters remaining</span> </span> </div> </form>
// For white background text areas <form> <div class="form__input"> <span class="input__text-area"> <label class="input__title" for="textarea">Notes to pharmacy staff</label> <textarea type="text" name="text" id="textarea" required="true" placeholder="e.g. Please add bubble gum flavoring to the amoxicillin"></textarea> <span class="character-count">300 characters remaining</span> </span> </div> </form>
Drop Downs are used to present a data set of mutually-exclusive selectable options. Note: Drop Down menus should be built to call the device-native input pickers.
<span class="select__contain"> <label for="select-dropdown">Title select</label> <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> <select id="select-dropdown" aria-label="Sort by drop-down list, press SPACE BAR to open available options in the list, page will reload"> <option>Select list item</option> <option>Add more list items</option> </select> </span>
<span class="select__contain white"> <label for="select-dropdown">Title select</label> <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> <select id="select-dropdown" aria-label="Sort by drop-down list, press SPACE BAR to open available options in the list, page will reload"> <option>Select list item</option> <option>Add more list items</option> </select> </span>
When no title appears and is only used for screenreaders
<span class="select__contain"> <label for="select-dropdown" class="sr-only">Title select</label> <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> <select id="select-dropdown" class="no-title" aria-label="Sort by drop-down list, press SPACE BAR to open available options in the list, page will reload"> <option>Select list item</option> <option>Add more list items</option> </select> </span>
<span class="select__contain white"> <label for="select-dropdown" class="sr-only">Title select</label> <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> <select id="select-dropdown" class="no-title" aria-label="Sort by drop-down list, press SPACE BAR to open available options in the list, page will reload"> <option>Select list item</option> <option>Add more list items</option> </select> </span>
Desktop, Tablet & MobileForm with Attached Button
Where possible form fields are connected to buttons, which creates a cohesive design lockup and removes any confusion on what the next step is for users.
// Date Picker - Current Date only <div class="input__contain input__date-picker input__fifty-fifty"> <input type="text" aria-label="date-picker" id="datepicker" placeholder="Choose date" data-has-date-picker="true" data-future="false" data-past="false"> </div>
Inline calendar
For use when there is the need for a larger visual element on the page than the dropdown date selector. This eliminates the need for the user to click into the calendar and puts the interaction tools right at their fingertips within the page.
<div id="datepicker-inline"></div>
Global Alerts
Alert and error messages are used to provide feedback to the user. Messaging Boxes should be used for server-side validation errors. Inline alerts should be used for simple system alerts or form. The dismiss button on the right side of the alerts are optional.
<span> <p> Error alert. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et tortor. </p> </span> </span>
Desktop, Tablet & MobileCorner Badge
The corner badge is used as visual support that encourages a user to take a specific course of action. Corner badges come in two sizes: small or large. For single line items use the small for double lined items use the large.
The corner flag is used as visual support that encourages a user to take a specific course of action. Corner flags have a limited amount of characters so text should be lmited to two words and no more than 5 characters per word.
