McLane Web Assets

McLane’s web assets guide is your essential toolkit for building and a cohesive online presence. From website components and responsive layouts to approved imagery and web typography, this guide ensures every digital interaction aligns with McLane’s brand standards and delivers a seamless user experience.

Colors

As a bold brand, our color palette reflects confidence and energy. We lead with red—powerful and attention-grabbing—supported by black, blue, green, and vibrant gradients for depth and versatility. Dark and light gray add balance and clarity, grounding our dynamic look.

These are the colors used throughout the site. Each has been assigned to a variable in the framework/variables.scss file.

Primary Colors

Accent Colors

Typography

These are our basic typographic styles. Make updates in the framework/typography.scss file.

HERO 01. The quick brown fox jumps over the lazy dog.

HERO 02. The quick brown fox jumps over the lazy dog.

H1. The quick brown fox jumps over the lazy dog.

H2. The quick brown fox jumps over the lazy dog.

H3. The quick brown fox jumps over the lazy dog.

H4. The quick brown fox jumps over the lazy dog.

H5. The quick brown fox jumps over the lazy dog.
H6. The quick brown fox jumps over the lazy dog.

Extra Large Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Large Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Default Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Small Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Extra Small Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et justo sed dui feugiat cursus. Phasellus pharetra dui lobortis odio efficitur suscipit. Aenean condimentum ullamcorper ullamcorper. Nunc a tempus neque. Pellentesque nec pharetra purus. Proin fermentum purus non tortor posuere, vel convallis dolor interdum. Suspendisse aliquet felis metus, vel tempus purus tincidunt eget.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu. Mark Norek Director of Marketing Everyday Stores

Lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula est, aliquam eu blandit ac, dictum nec erat.
  • Nulla quis sapien non lacus rutrum mollis suscipit scelerisque velit. In hac habitasse platea dictumst.
  • Duis in justo tincidunt, luctus ligula sed, placerat diam. Morbi eget tellus ipsum. Fusce iaculis maximus sem eget tincidunt.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula est, aliquam eu blandit ac, dictum nec erat.
  2. Nulla quis sapien non lacus rutrum mollis suscipit scelerisque velit. In hac habitasse platea dictumst.
  3. Duis in justo tincidunt, luctus ligula sed, placerat diam. Morbi eget tellus ipsum. Fusce iaculis maximus sem eget tincidunt.

Buttons

These are our basic button styles. Make updates in the framework/buttons.scss file.

.btn.btn--default

.btn.btn--arrow

.btn.btn--blue

.btn.btn--green

.btn.btn--yellow

.btn.btn--red

.btn.btn--link

div.button-element

.btn.btn--arrow

.btn.btn--xs

.btn.btn--sm

.btn

.btn.btn--lg

.btn.btn--xl

.btn.btn--block

Forms

These are our basic form styles. Make updates in the framework/forms.scss file.

Notices

These are our basic notice styles. Make updates in the framework/notice.scss file.

Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat. Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat. Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.

Success

Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat. Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.

Info

Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.

Warning

Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.

Error

Et adipisicing culpa deserunt nostrud ad veniam nulla. Est velit labore esse esse cupidatat.

Tables

These are our table styles. Make updates in the framework/tables.scss file.

Col 1 Col 2 Col 3 Col 4
Row 1 / Col 1 Row 1 / Col 2 Row 1 / Col 3 Row 1 / Col 4
Row 2 / Col 1 Row 2 / Col 2 Row 2 / Col 3 Row 2 / Col 4
Row 3 / Col 1 Row 3 / Col 2 Row 3 / Col 3 Row 3 / Col 4
Row 4 / Col 1 Row 4 / Col 2 Row 4 / Col 3 Row 4 / Col 4
Col 1 Col 2 Col 3 Col 4

Modals

These are our modal styles. Make updates in the framework/modals.scss file.

Accordions

These are our accordion styles. Make updates in the framework/accordions.scss file.

This is an accordion header.
Adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat culpa. Pariatur ullamco aute sunt esse adipisicing. Excepteur eu non eiusmod occaecat commodo commodo et ad ipsum elit. Pariatur sit adipisicing sunt excepteur enim nostrud pariatur incididunt.
This is an accordion header.
Adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat culpa. Pariatur ullamco aute sunt esse adipisicing. Excepteur eu non eiusmod occaecat commodo commodo et ad ipsum elit. Pariatur sit adipisicing sunt excepteur enim nostrud pariatur incididunt.
This is an accordion header.
Adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat culpa. Pariatur ullamco aute sunt esse adipisicing. Excepteur eu non eiusmod occaecat commodo commodo et ad ipsum elit. Pariatur sit adipisicing sunt excepteur enim nostrud pariatur incididunt.

Tabs

These are our tab styles. Make updates in the framework/tabs.scss file.

Occaecat do do adipisicing adipisicing ut fugiat culpa consequat pariatur ullamco aute sunt. Adipisicing irure excepteur eu non eiusmod occaecat commodo commodo. Ad ipsum elit esse pariatur sit adipisicing sunt excepteur.
Do do adipisicing adipisicing ut fugiat culpa consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim. Pariatur incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea. Laboris nisi adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur. Fugiat cupidatat commodo magna et aliqua elit sint cupidatat dolor sint aute ullamco.
Aliqua proident occaecat do do. Adipisicing ut fugiat culpa consequat. Ullamco aute sunt esse adipisicing irure excepteur eu non eiusmod occaecat commodo commodo. Ad ipsum elit esse pariatur sit adipisicing sunt excepteur. Nostrud pariatur incididunt duis commodo mollit esse veniam.

Tooltips

These are our tooltip styles. Make updates in the framework/tooltips.scss file.

Cards

These are our card styles. Make updates in the framework/cards.scss" and "framework/card-general.scss files.

Square Cards

Parallelogram Cards

PR Cards

Event Cards

Pagination

These are our pagination styles. Make updates in the framework/pagination.scss file.





Icons

We use Font Awesome as our default icon font. For more icons and documentation, visit https://fontawesome.com/icons

Or, to generate your own icon set, you may use the IcoMoon App.

Loading Elements

These are our built-in options to add loaders to a section or page. Make updates in the loading.scss file.

Social Sharing

We have some built-in functions that make use of data attributes to make sharing on common social networks easier. You can also create social links to URLs. You can find out more by viewing the lib/wl-share.js and partials/components/social files.

Links

Share

Favicons

These are our website favicons and app icons.


Android (512x512)


Android (192x192)


Apple (180x180)


Favicon (32x32)

This is a modal title

Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.

This is a modal title

Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.

This is a modal title

Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.

This is a modal title

Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.

This is a modal title

Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.

This is a modal title

Nostrud ad veniam nulla aute est velit. Esse esse cupidatat amet velit id elit consequat minim ullamco mollit. Excepteur ea laboris adipisicing aliqua proident occaecat do.