Banner Circular Item
Full-page width promotional image inside the digital circular.
- Banners can be any height and should be 2k to 4k wide.
- Small text should be avoided or mobile devices won’t be able to read it.
- Banners create new sections within a circular page.
Examples
Full-Page banners can be used to draw a lot of attention to a promotion. Another popular us is to
create beautiful section heading.
Full-Page Banner Image Circular Item
<div class="col-12">
<article class="circular-item circular-item-banner card card-standard" id="circular-item-1">
<a class="circular-item-link" href="https://www.topsmarkets.com/Recipes/Detail/8288/Creamy_Corn_Filled_Sweet_Peppers/">
<img src="/assets/images/circular-items/banner-image.jpg" alt="What is Naturally Raised Organic Meat? Click to Watch Video." class="circular-item-banner-image card-img img-fluid">
</a>
</article>
</div>The way the banner item handles living in a grid is different from how other circular items handle it.
The banner item sits inside a table column, but the other circular items are the table column. The
banner item also differs in that it uses the col-12 class to span the full width of the page, while
most circular items simply use the col class to take up a flexible division of available space.
Responsive Design Considerations
It’s important to realizes these images will be shrinking down to about 320px for some mobile
devices, but might be 2000px wide on a desktop computer. Text that is quite readable on a wide
desktop display will often shrink to be completely unreadable on a mobile device. There are two
basic approaches for handling text at various responsive sizes.
- Keep the text big and don’t have a lot of text.
- Create different images for different responsive sizes.
Mixed Items Example
Here you can see how the banner creates new section headings within a group of circular items.
Enter to Win The Sweet Corn Recipe Contest!
Enter before 10/11/2020! Entry form, rules, and other details in the link below.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
Homegrown Amaize! Sweet Corn
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
Homegrown Amaize! Sweet Corn
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
Homegrown Amaize! Sweet Corn
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
Homegrown Amaize! Sweet Corn
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
12 for
$
4
99
lb.
Available for a Limited Time
Starts 4/10/2050
Recipe: Amaize Sweet Corn Summer Spreads
Enter to Win The Sweet Corn Recipe Contest!
Enter before 10/11/2020! Entry form, rules, and other details in the link below.
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
Homegrown Amaize! Sweet Corn
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
Homegrown Amaize! Sweet Corn
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
Homegrown Amaize! Sweet Corn
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
LOCAL! Amaize! Sweet Corn - The Best Corn You'll Ever Eat!
Homegrown Amaize! Sweet Corn
White Sweet Corn with an Amazing Flavor, Distinctively Delicious Pop and Crunch
Enter to Win The Sweet Corn Recipe Contest!
Enter before 10/11/2020! Entry form, rules, and other details in the link below.