Component Library
Hero Rows
NOTE
- Edit the background style settings (image & overlay) from the wrench icon on the targeted row.
- Edit the text content from the wrench icon on the respective module.
Hero - Level 01
Introductory block for homepage or one-off landing pages with special prominence
Hero - Level 02
Introductory block to landing pages
Hero - Level 03
Introductory block to detail pages
Hero - Level 04
Introductory block to legal & footer pages
TERMS & CONDITIONS
Key Benefits Callouts
NOTE
- Edit the image area by selecting “Column Settings” under the column icon.
- Edit the icon by selecting the wrench icon on the icon module.
- Edit the text content from the wrench icon on the respective text module.
NOTE
- A row’s height is based on the amount of content in the text column. The more text, the taller the column & row. Most callouts work best with roughly one paragraph of text, except for Level 05 which works best with a sentence at most.
- Icons have consistent proportions, but images are cropped based on screen size. Because the aspect ratio is different based on screen size, images with a centered focal point work best.
Key Benefits Callout - Level 01
Fullscreen visual blocks used to showcase multiple key benefits or features (available as image left or image right on desktop)
EXAMPLE OF A HEADLINE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum. Ut nec odio id diam venenatis malesuada ut in leo. Sed ac elit non ex luctus suscipit quis sit amet diam. Curabitur ac justo orci. Nullam ullamcorper metus in mauris interdum.
EXAMPLE OF A HEADLINE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum. Ut nec odio id diam venenatis malesuada ut in leo. Sed ac elit non ex luctus suscipit quis sit amet diam. Curabitur ac justo orci. Nullam ullamcorper metus in mauris interdum.
Key Benefits Callout - Level 02
Full-width blocks with a fullscreen background used to showcase key benefits or features (available as image left or image right on desktop)
EXAMPLE OF A HEADLINE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum. Ut nec odio id diam venenatis malesuada ut in leo. Sed ac elit non ex luctus suscipit quis sit amet diam. Curabitur ac justo orci. Nullam ullamcorper metus in mauris interdum.
EXAMPLE OF A HEADLINE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum. Ut nec odio id diam venenatis malesuada ut in leo. Sed ac elit non ex luctus suscipit quis sit amet diam. Curabitur ac justo orci. Nullam ullamcorper metus in mauris interdum.
Key Benefits Callout - Level 03
Full-width visual blocks with icons to showcase key benefits or features (available as image left or image right on desktop)
EXAMPLE OF A HEADLINE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum. Ut nec odio id diam venenatis malesuada ut in leo. Sed ac elit non ex luctus suscipit quis sit amet diam. Curabitur ac justo orci. Nullam ullamcorper metus in mauris interdum.
EXAMPLE OF A HEADLINE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum. Ut nec odio id diam venenatis malesuada ut in leo. Sed ac elit non ex luctus suscipit quis sit amet diam. Curabitur ac justo orci. Nullam ullamcorper metus in mauris interdum.
Key Benefits Callout - Level 04
Small visual card blocks to showcase key benefits or features (available as 2up or 3up on desktop)
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum.
Key Benefits Callout - Level 05
Extra small visual blocks with icons to showcase key benefits or features (available as 3up or 4up on desktop)
NOTE
- The background can be changed to a light gray (#f2f2f2) to break up pages with a lot of white.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Example of a headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Listings
NOTE
- To edit list blocks with images, select the “Column Settings” under the column icon to update the background and the wrench icons on the content modules.
- To edit list blocks with icons, use the wrench icon on the list module to update the modules in each column.
- To edit list blocks with text only, use the wrench icon on the list module to update each individual module.
List Block - with images
Block of list items with images that could be used for listing contacts, locations, etc.
Jessica Anderson-Smith
Jessica Anderson-Smith
Jessica Anderson-Smith
Jessica Anderson-Smith
Jessica Anderson-Smith
Jessica Anderson-Smith
Jessica Anderson-Smith
List Block - with icons
Block of list items with icons that could be used for listing patient resources
Name of the element
Enter description text here.
Name of the element
Enter description text here.
Name of the element
Enter description text here.
Name of the element
Enter description text here.
Name of the element
Enter description text here.
Name of the element
Enter description text here.
List Block - text only
Block of list items with text only that could be used for listing the centers of excellence
Text Blocks
Text - Callout
Text callout block that could be used for introductory text beneath the hero or further down the page to highlight a key feature or benefit without an image
Example of introductory text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat neque eu leo dictum, sed rhoncus nulla egestas. Proin semper, lacus eget tincidunt gravida, libero odio rutrum urna, at pharetra orci arcu nec libero. Vestibulum elit dolor, vestibulum sed fringilla dapibus, aliquam nec arcu.
Text - Basic
Basic text block that works well when you need long paragraphs of text to describe an idea
EXAMPLE OF A HEADLINE
Introductory text (delete if not necessary). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem ex, faucibus sit amet aliquet id, tincidunt in lacus. Aliquam aliquet tincidunt ex ac condimentum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac purus felis. Phasellus pretium sodales dapibus. Aenean tempor, risus sed interdum interdum, nulla enim bibendum nulla, placerat venenatis nunc justo non nibh. Vivamus urna arcu, viverra vel viverra vel, placerat at eros. Vestibulum eget dui tincidunt, imperdiet est vestibulum, consequat metus. Ut maximus imperdiet lacinia. Aliquam non porta magna. Phasellus fermentum lectus et lectus aliquet, ut gravida massa porttitor. Sed pulvinar, neque sit amet mattis commodo, erat magna ultricies eros, nec hendrerit enim purus ac libero. Nullam ac massa ornare, imperdiet nisl id, bibendum urna. Vestibulum pellentesque pretium sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec gravida, tellus eu volutpat aliquam, urna sapien pretium risus, vitae ultrices velit nisi eget mauris. Nulla vehicula dui ut augue mattis, a tempus felis vulputate.
Page Heading
Basic section heading module (NOTE: This is saved as a module, not a row)
EXAMPLE OF A HEADLINE
Quotes
NOTE
- The background color can change to the darker blue (#002B4A) if the row appears next to another blue row
Quote - Single
“Example of a quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat neque eu leo dictum, sed rhoncus quid pro quo nulla egestas. Neque eu leo dictum, sed rhoncus quid pro quo nulla egestas.”
— Samantha Greenwald
Amber Pharmacy Employee
Quote - Multiple
“Example of a quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat neque eu leo dictum, sed rhoncus quid pro quo nulla egestas.”
— Samantha Greenwald
Amber Pharmacy Employee
“Example of a quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat neque eu leo dictum, sed rhoncus quid pro quo nulla egestas.”
— Samantha Greenwald
Amber Pharmacy Employee
“Example of a quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat neque eu leo dictum, sed rhoncus quid pro quo nulla egestas.”
— Samantha Greenwald
Amber Pharmacy Employee
Quote - with Image
“Example of a quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat neque eu leo dictum, sed rhoncus quid pro quo nulla egestas.”
— Samantha Greenwald
Amber Pharmacy Employee
Statistics
NOTE
- The background color can change to the darker blue (#002B4A) if the row appears next to another blue row
Statistic - Single
Aenean justo leo, tempus quis vehicula id, mollis non lacus. Aliquam at feugiat lectus. Fusce consectetur scelerisque augue, ac consectetur eros lobortis sit amet. Vivamus dolor massa, sagittis et accumsan mollis, pretium eu nibh.
Statistic - Multiple
Miscellaneous
NOTE
- The background color can change to the darker blue (#002B4A) if the row appears next to another blue row
Event
Wed, March 1
Example location
Address Line 01
Bloomington, MN 55499
Accordion
Basic accordion module for FAQ’s and areas with a lot of text
Spacing
Empty row used to quickly add whitespace between items
NOTE: The background color may need to be edited depending on the nearby modules.
Contact Blocks
NOTE
- These are global elements, so any changes made to one instance will update all instances throughout the site
Contact - General
Small contact module for pages with multiple audiences. Directs users to the main contact page.
Get in touch with Hy-Vee Pharmacy Solutions today!
Contact - Form
Large contact module focused on patients. The main form sends an email to [email protected]
HOW CAN WE HELP YOU?
Reach us by phone 24 hours a day, 7 days a week at 877.794.9833, or use the form below.
If you need to manage payments, track an order status or make adjustments to a medication, you can do this quickly through our patient portal.
NOTE
- These are global elements, so any changes made to one instance will update all instances throughout the site
- The footer element is included in all the current templates. New templates & pages should include the footer block for consistency.