2-columns Responsive banner.
Layout (Desktop):- The banner is displayed in two columns. Left column contains image, right column contains copy with Primary red "SHOP NOW" button.
Layout (Mobile): - Columns stack vertically. The right column (text and buttons) stacks below the Staples logo.
- No overlap or content loss.
2-columns Responsive banner.
Layout (Desktop):- The banner is displayed in two columns. Right column contains image, left column contains copy. Secondary button with blue "SHOP NOW" and Tertiary button is grey outlined "LEARN MORE" button.
Layout (Mobile):
- Columns stack vertically. - Right column content (Staples Preferred Logo) appears above the text and buttons. - Buttons remain centered and tappable.
2 columns
Content Left Title
Displayed in a horizontal grid on desktop screens
On desktop: 2-column layout with equal width and spacing.
On tablet/mobile: Columns should stack vertically for readability.
Images should be responsive and maintain aspect ratio.
Content Right Title
Set up in a visually balanced side-by-side layout.
Equal spacing and alignment between columns.
Consistent padding and margins
Columns stack properly at breakpoints.
Text should wrap properly and not overflow.
Video embedded
A video is embedded below and should be responsive with mobile.
Product carousel
Shows product image, product name, price, delivery available, pick-up location and "add to cart" button, with navigation arrows. 5 products displayed for desktop, and 2 products for mobile.
Sliver banner (Full banner with click option)
Sliver banners are a narrow static banner with the text embedded into the image with mobile version showing a smaller banner centered.
3 columns
V
isually aligned to the left edge. Columns should stack or reflow appropriately on smaller screens.
Content should be readable and well-aligned. Check for overflow issues or broken layout on different screen sizes.
Aligned to the right edge of the page. Ensure visibility and alignment across breakpoints.
4 columns
Leftmost Column
Ensure margins and padding are consistent between columns.
Second Column
Positioned immediately right of the left column. Columns should stack appropriately on tablets and phones.
Third Column
The central column for content. Content should load correctly, align properly, and not overflow.
Rightmost Column
Should align with the right edge and remain visually balanced.
5 columns Responsive
These tiles act as wrappers that include an image/icon and a CTA, typically linking to a specific category or collection page. They include 5 tiles evenly spaced and displayed in a single row on large screens with only the CTA being clicklable. Mobile: 2 per row and 1 per row (stacked layout). Content should remain centered and spaced evenly.
6 columns
These tiles act as wrappers that include an image/icon and a CTA, typically linking to a specific category or collection page. They include 6 tiles displayed in a single row on large screens with only the CTA being clicklable. Mobile: 2 per row (stacked layout). Centered or aligned content as per spec.
Card Tiles
Card Tile: 3 cards
The layout consists of a single row with 3 card-style tiles aligned horizontally. Card includes Title, Image with no border, Short description. Layout on mobile stacks vertically in a single column.
Card Tile: 3 cards
The layout consists of a single row with 3 card-style tiles aligned horizontally. Card includes Title, Image with no border, Short description. Layout on mobile stacks vertically in a single column.
Card Tile: 3 cards
The layout consists of a single row with 3 card-style tiles aligned horizontally. Card includes Title, Image with no border, Short description. Layout on mobile stacks vertically in a single column.
Card Tile: 4 cards
The layout consists of a single row with 4 card-style tiles aligned horizontally. Card includes Title, Image with border, short description and secondary CTA button. Layout on mobile stacks vertically in a single column.
Card Tile: 4 cards
The layout consists of a single row with 4 card-style tiles aligned horizontally. Card includes Title, Image with border, short description and secondary CTA button. Layout on mobile stacks vertically in a single column.
Card Tile: 4 cards
The layout consists of a single row with 4 card-style tiles aligned horizontally. Card includes Title, Image with border, short description and secondary CTA button. Layout on mobile stacks vertically in a single column.
Card Tile: 4 cards
The layout consists of a single row with 4 card-style tiles aligned horizontally. Card includes Title, Image with border, short description and secondary CTA button. Layout on mobile stacks vertically in a single column.
Text to show Bullet Points.
We provide breakroom solutions tailored for small businesses, solo entrepreneurs, and growing SMBs.
From snacks and beverages to cleaning supplies and first aid kits, our range of products is designed to fit your business needs.
Enjoy fast delivery and trusted brands, making it easier than ever to keep your team energized and your workplace running smoothly.