Content Tout Block
This shows the most common usecase for a tout being displayed in a grid.
Examples
Standard Tout Block With Content Grid Formatter
Showing a several tout blocks used in a grid formatter.
Source
HTML
<content-grid-formatter type="flex" flex-grow="true" flex-align="flex-start" columns="1|2|4">
<content-tout-block>
<content-image slot="media" alt="Test Alt Text" src="https://www.clinique.com/media/export/cms/products/600x750/cl_sku_6F3901_600x750_0.png"></content-image>
<content-text-block>
<content-spacing-wrapper text-align="center|left" left-offset="2" right-offset="2" top-offset="2" bottom-offset="2">
<content-line style-class="text-style--title">Wake Up Beautiful</content-line>
<content-line>Change the future of your skin with every drop. Includes advanced technologies and benefits: Skin feels firmer. 8-hour anti-oxidant power. 72-hour hydration. Pores look minimized.</content-line>
<content-spacing-wrapper text-align="center|left" top-offset="2">
<content-button href="#">SHOP NOW</content-button>
</content-spacing-wrapper>
</content-spacing-wrapper>
</content-text-block>
</content-tout-block>
<content-tout-block>
<content-image slot="media" alt="Test Alt Text" src="https://www.clinique.com/media/export/cms/2101_assets/emilia_BMW3_dt@1.5x.jpg"></content-image>
<content-text-block>
<content-spacing-wrapper text-align="center|left" left-offset="2" right-offset="2" top-offset="2" bottom-offset="2">
<content-line style-class="text-style--title">Wake Up Beautiful</content-line>
<content-line>Change the future of your skin with every drop. Includes advanced technologies and benefits: Skin feels firmer. 8-hour anti-oxidant power. 72-hour hydration. Pores look minimized.</content-line>
<content-spacing-wrapper text-align="center|left" top-offset="2">
<content-button href="#">SHOP NOW</content-button>
</content-spacing-wrapper>
</content-spacing-wrapper>
</content-text-block>
</content-tout-block>
<content-tout-block>
<content-image slot="media" alt="Test Alt Text" src="https://www.clinique.com/media/export/cms/2101_assets/Sp21_EBCF_BMW2_dt@1.5x-1.jpg"></content-image>
<content-text-block>
<content-spacing-wrapper text-align="center|left" left-offset="2" right-offset="2" top-offset="2" bottom-offset="2">
<content-line style-class="text-style--title">Wake Up Beautiful</content-line>
<content-line>Change the future of your skin with every drop. Includes advanced technologies and benefits: Skin feels firmer. 8-hour anti-oxidant power. 72-hour hydration. Pores look minimized.</content-line>
<content-spacing-wrapper text-align="center|left" top-offset="2">
<content-button href="#">SHOP NOW</content-button>
</content-spacing-wrapper>
</content-spacing-wrapper>
</content-text-block>
</content-tout-block>
<content-tout-block>
<content-image slot="media" alt="Test Alt Text" src="https://www.clinique.com/media/export/cms/2102_assets/S21_Clinical_Reality_BMW_EBMU_dt_reduced.mp4"></content-image>
<content-text-block>
<content-spacing-wrapper text-align="center|left" left-offset="2" right-offset="2" top-offset="2" bottom-offset="2">
<content-line style-class="text-style--title">Wake Up Beautiful</content-line>
<content-line>Change the future of your skin with every drop. Includes advanced technologies and benefits: Skin feels firmer. 8-hour anti-oxidant power. 72-hour hydration. Pores look minimized.</content-line>
<content-spacing-wrapper text-align="center|left" top-offset="2">
<content-button href="#">SHOP NOW</content-button>
</content-spacing-wrapper>
</content-spacing-wrapper>
</content-text-block>
</content-tout-block>
</content-grid-formatter>
<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>
CSS
Tout Block with Hover Content
This example shows hover content on devices that support hover. For devices that don't, the content displays by default.
Source
HTML
<content-grid-formatter class="content-product-grid" type="grid" flex-grow="true" flex-align="flex-start" columns="2|4">
<content-tout-block>
<content-button href="?test" slot="mediaContent" clickable-block="true">
<content-text-block vertical-alignment="top">
<content-spacing-wrapper text-align="left" bottom-offset="3">
<content-button href="#" style-class="button">Quick Shop</content-button>
</content-spacing-wrapper>
</content-text-block>
</content-button>
<div slot="media">
<content-image alt="Test Alt Text" src="https://www.aveda.com/media/images/products/330x548/white/av_sku_AY0201_124710_330x548_0.jpg"></content-image>
</div>
<content-text-block>
<content-spacing-wrapper text-align="center|left">
<content-line style-class="text-style--tout-promo">$148 value</content-line>
<content-button href="#">
<content-line style-class="text-style--tout-title" max-width="80">INVATI ADVANCED<span class="trade">™</span> SYSTEM SET RICH</content-line>
</content-button>
<content-line>reduces hair loss; formulated for medium to thick, thinning hair</content-line>
<content-line>$138.00</content-line>
</content-spacing-wrapper>
</content-text-block>
</content-tout-block>
<content-tout-block>
<content-button href="?test" slot="mediaContent" clickable-block="true">
<content-text-block vertical-alignment="center">
<content-spacing-wrapper text-align="center">
<content-button href="#" style-class="button">Quick Shop</content-button>
</content-spacing-wrapper>
</content-text-block>
</content-button>
<div slot="media">
<content-image alt="Test Alt Text" src="https://www.aveda.com/media/images/products/330x548/white/av_sku_AY0201_124710_330x548_0.jpg"></content-image>
</div>
<content-text-block>
<content-spacing-wrapper text-align="center|left">
<content-line style-class="text-style--tout-promo">$148 value</content-line>
<content-button href="#">
<content-line style-class="text-style--tout-title" max-width="80">INVATI ADVANCED<span class="trade">™</span> SYSTEM SET LIGHT</content-line>
</content-button>
<content-line>reduces hair loss; formulated for medium to thick, thinning hair</content-line>
<content-line>$138.00</content-line>
</content-spacing-wrapper>
</content-text-block>
</content-tout-block>
<content-tout-block>
<content-button href="?test" slot="mediaContent" clickable-block="true">
<content-text-block vertical-alignment="middle|bottom">
<content-spacing-wrapper text-align="left" bottom-offset="3">
<content-button href="#" style-class="button">Quick Shop</content-button>
</content-spacing-wrapper>
</content-text-block>
</content-button>
<div slot="media">
<img class="product-badge" src="https://www.aveda.com/media/images/products/badges/new-badge.png" />
<content-image alt="Test Alt Text" src="https://www.aveda.com/media/images/products/330x548/white/av_sku_AXFA01_123526_330x548_0.jpg"></content-image>
</div>
<content-text-block>
<content-spacing-wrapper text-align="center|left">
<content-button href="#">
<content-line style-class="text-style--tout-title" max-width="80">INVATI ADVANCED<span class="trade">™</span> SYSTEM SET RICH</content-line>
</content-button>
<content-line>reduces hair loss; formulated for medium to thick, thinning hair</content-line>
<content-line>$138.00</content-line>
</content-spacing-wrapper>
</content-text-block>
</content-tout-block>
<content-tout-block>
<content-button href="?test" slot="mediaContent" clickable-block="true">
<content-text-block vertical-alignment="middle|bottom">
<content-spacing-wrapper text-align="left" bottom-offset="3">
<content-button href="#" style-class="button">Quick Shop</content-button>
</content-spacing-wrapper>
</content-text-block>
</content-button>
<div slot="media">
<img class="product-badge" src="https://www.aveda.com/media/images/products/badges/bestseller_badge.png" />
<content-image alt="Test Alt Text" src="https://www.aveda.com/media/images/products/330x548/white/av_sku_AMFW01_87916_330x548_0.jpg"></content-image>
</div>
<content-text-block>
<content-spacing-wrapper text-align="center|left">
<content-button href="#">
<content-line style-class="text-style--tout-title" max-width="80">INVATI ADVANCED<span class="trade">™</span> SYSTEM SET RICH</content-line>
</content-button>
<content-line>reduces hair loss; formulated for medium to thick, thinning hair</content-line>
<content-spacing-wrapper top-offset="2" bottom-offset="3">
<content-line style-class="text-style--disclosure">*Due to breakage from brushing, after using the invati advanced<span class="trade">™</span> system for 12 weeks.</content-line>
</content-spacing-wrapper>
<content-line>$138.00</content-line>
</content-spacing-wrapper>
</content-text-block>
</content-tout-block>
</content-grid-formatter>
<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>
CSS
.content-product-grid {
max-width: 1280px;
margin: auto;
}
.button {
color: white;
background: black;
padding: 4px 10px;
}