Style Guide for Walgreens
Background Colors
Neutral
class: .bg--neutral
$neutral: #F4F2EF
Clay
class: .bg--clay
$clay: #DED5D0
Crimson
class: .bg--crimson
$crimson: #A32A33
Headline Colors
Default Headline
class: .headline
Crimson Headline
class: .headline--crimson
White Headline
class: .headline--white
Headlines
Lorem ipsum dolor sit amet
classes: .headline--xl .headline
Lorem ipsum dolor sit amet
classes: .headline--lg .headline
Lorem ipsum dolor sit amet
classes: .headline--md .headline
Lorem ipsum dolor sit amet
classes: .headline--sm .headline
Lorem ipsum dolor sit amet
classes: .headline--xs .headline
Lorem ipsum dolor sit amet
classes: .headline--xxs .headline
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
classes: .copy--lg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
classes: .copy--md
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
classes: .copy--sm
Video Player with Fancybox
Standard Block formatting (horizontal and vertical spacing/padding)
Section will go full width (with top-margin / no bottom margin)
Parent class(es): .section .section__margin-top .bg--blue
Parent class(es): .bg--red
Section will go full width (with top-margin / no bottom margin)
Parent class(es): .section .section__margin-top .bg--blue
Parent class(es): .section__grid-wrapper .bg--red
Section will be padded horizontally and child has padding (no top-margin/ includes bottom margin)
Parent class(es): .section .bg--blue .section__margin-top .section__padded
Parent class(es): .section__grid-wrapper .section__container .bg--red
Section Max-Width
Full Width: Default
max-width__lg
max-width__md
max-width__sm
max-width__xs
Section Guide for Walgreens
Below are all of the section types (patterns) that have been created for this site.
Page Introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Page Sub-Section Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Page Sub-Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Page Sub-Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Page Sub-Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac porta nulla. Etiam sit amet venenatis lectus, sed fermentum enim. Sed fermentum purus a gravida vestibulum. Donec condimentum malesuada lacus eu varius. Mauris pulvinar, lacus et elementum accumsan, massa sem sodales orci, ut rhoncus tellus lectus in justo. Curabitur aliquet gravida lacus quis cursus. Fusce pellentesque semper quam. Suspendisse aliquet interdum augue, eget fermentum neque ultrices ut. Aliquam posuere consectetur pretium. Cras aliquam porttitor fermentum.
Quote text from employee here.
Employee Name here
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque, sem tempus condimentum varius, lorem elit tempus ante, ac scelerisque erat erat id tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porta nibh at quam maximus dignissim sed non orci. Morbi cursus quis lectus sagittis aliquet. Aliquam viverra elit ac massa viverra finibus. Integer rutrum tortor quis molestie varius. Suspendisse nunc sapien, dapibus nec faucibus vitae, consectetur non velit. Vestibulum purus quam, lacinia eget sollicitudin quis, consectetur in purus.
Bring your talents to the pharmacy that’s been innovating and evolving for over 120 years.
Make a big difference in neighborhoods and customers’ lives as the smiling face of our brand.
Support our stores by driving the initiatives that propel health and well-being forward.
Join a state-of-the-art distribution system that moves merchandise across the country.
Be the caring voice of our brand when customers and patients have questions.
We’re using innovative, robotic technology in a central pharmacy environment, to help ease workload on our store pharmacy teams.
Headline Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales id urna ac eleifend. Proin tincidunt sollicitudin mauris at convallis. Praesent et lectus velit. Mauris sit amet nulla pulvinar nibh ornare facilisis quis eget sem. Donec tempor interdum efficitur. Suspendisse potenti. Ut id iaculis lorem.
Link TextLorem ipsum dolor sit amet, consectetur adipiscing elit
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.