Use Standard Tile...
- To pair an image with a title, and optional descriptive text and attributes.
- To promote products.
Don't use Standard Tile...
- To serve as a Radio or Checkbox. Use Selection Set instead.
- If your container requires flexible styling choices, such as a background color or a border. Use Card instead.
Every Standard Tile includes:
StandardTileImagesub-component: use either a Fluid Image or a Responsive Image unless specified otherwise.StandardTileContentssub-component that contains the tile's name, and may contain some other optional sub-components such as a description, pricing, promo code, or a callout.
Skins
Standard
Use skin="standard", or no skin prop at all to display the default Standard Tile.
The preview has been updated.
Share<StandardTilelayout="vertical"imageWidth="standard"render={props => (<a href="#" style={{ width: 300 }} className={props.className}>{props.children}</a>)}><StandardTileImage><BasicResponsiveImageaspectRatio={1}src="https://via.placeholder.com/1600x1600/?text=a square image"/></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName></StandardTileContents></StandardTile>
<a href="#" class="swan-standard-tile" style="width: 300px"><div class="swan-standard-tile-image"><divclass="swan-responsive-image-wrapper swan-aspect-ratio-container"style="padding-bottom: 100%"><div class="swan-aspect-ratio-content"><imgsrc="https://via.placeholder.com/1600x1600/?text=a square image"class="swan-responsive-image"/></div></div></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div></div></a>
Product
Use skin="product" to navigate to a product/category page.
Info:
Use a Fluid Image for tiles with skin="product", as these tiles already have a specified height for the image.
The preview has been updated.
<GridContainer><Row><Column span={4}><StandardTileskin="product"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/400/400" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column><Column span={4}><StandardTileskin="product"as="a"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/400/600?q=1" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column><Column span={4}><StandardTileskin="product"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/600/400?q=3" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column><Column span={4}><StandardTileskin="product"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/400/400?q=4" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTilePrice><Pricing><PricingOffer>100 Starting at</PricingOffer>{' '}<PricingComparison><ListPrice>€10.99</ListPrice>{' '}<DiscountPrice>€8.99</DiscountPrice></PricingComparison>{' '}<ShortTaxMessage>Inc. VAT</ShortTaxMessage></Pricing></StandardTilePrice></StandardTileContents></StandardTile></Column><Column span={4}><StandardTileskin="product"render={props => <a className={props.className}>{props.children}</a>}><StandardTileOverlay><Callout>Callout</Callout></StandardTileOverlay><StandardTileImage><FluidImage src="https://picsum.photos/400/400?q=5" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName></StandardTileContents></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-4"><a href="#" class="swan-standard-tile swan-standard-tile-skin-product"><div class="swan-standard-tile-image"><img src="https://picsum.photos/400/400" class="swan-fluid-image" /></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></a></div><div class="swan-col-4"><a href="#" class="swan-standard-tile swan-standard-tile-skin-product"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/400/600?q=1"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></a></div><div class="swan-col-4"><a href="#" class="swan-standard-tile swan-standard-tile-skin-product"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/600/400?q=3"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></a></div><div class="swan-col-4"><a href="#" class="swan-standard-tile swan-standard-tile-skin-product"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/400/400?q=4"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-price"><span class="swan-pricing"><span class="swan-pricing-offer">100 Starting at</span><span class="swan-pricing-comparison"><span class="swan-list-price">€10.99</span><span class="swan-discount-price">€8.99</span></span><span class="swan-short-tax-message">Inc. VAT</span></span></div></div></a></div><div class="swan-col-4"><a href="#" class="swan-standard-tile swan-standard-tile-skin-product"><div class="swan-standard-tile-overlay"><span class="swan-callout">Callout</span></div><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/400/400?q=5"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div></div></a></div></div></div>
Full-bleed
Use imageWidth="full-bleed" in tiles with skin="product" to extend the image to the edges of the tile.
The preview has been updated.
<GridContainer><Row><Column span={4}><StandardTileskin="product"imageWidth="full-bleed"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/1600/1300?text=16:13 image" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column><Column span={4}><StandardTileskin="product"imageWidth="full-bleed"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/400/400?q=1" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column><Column span={4}><StandardTileskin="product"imageWidth="full-bleed"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/1600/1300?text=16:13 image" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column><Column span={4}><StandardTileskin="product"imageWidth="full-bleed"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/400/400?q=4" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column><Column span={4}><StandardTileskin="product"imageWidth="full-bleed"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/400/600?q=5" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTilePrice><Pricing><PricingOffer>100 Starting at</PricingOffer>{' '}<PricingComparison><ListPrice>€10.99</ListPrice>{' '}<DiscountPrice>€8.99</DiscountPrice></PricingComparison>{' '}<ShortTaxMessage>Inc. VAT</ShortTaxMessage></Pricing></StandardTilePrice></StandardTileContents></StandardTile></Column><Column span={4}><StandardTileskin="product"imageWidth="full-bleed"render={props => <a className={props.className}>{props.children}</a>}><StandardTileOverlay><Callout>Callout</Callout></StandardTileOverlay><StandardTileImage><FluidImage src="https://picsum.photos/600/400?q=1" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName></StandardTileContents></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-4"><ahref="#"class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/1600/1300?text=16:13 image"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></a></div><div class="swan-col-4"><ahref="#"class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/400/400?q=1"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></a></div><div class="swan-col-4"><ahref="#"class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/1600/1300?text=16:13 image"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></a></div><div class="swan-col-4"><ahref="#"class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/400/400?q=4"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></a></div><div class="swan-col-4"><ahref="#"class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/400/600?q=5"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-price"><span class="swan-pricing"><span class="swan-pricing-offer">100 Starting at</span><span class="swan-pricing-comparison"><span class="swan-list-price">€10.99</span><span class="swan-discount-price">€8.99</span></span><span class="swan-short-tax-message">Inc. VAT</span></span></div></div></a></div><div class="swan-col-4"><ahref="#"class="swan-standard-tile swan-standard-tile-skin-product swan-standard-tile-full-bleed"><div class="swan-standard-tile-overlay"><span class="swan-callout">Callout</span></div><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/600/400?q=1"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div></div></a></div></div></div>
Circular
- Use
skin="circular"to render the tile image as a disc. Refer to guidelines. - Use Fluid Image for the tile's image.
The preview has been updated.
<GridContainer><Row><Column span={4}><StandardTileskin="circular"render={props => <a className={props.className}>{props.children}</a>}><StandardTileImage><FluidImage src="https://picsum.photos/400/400" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName></StandardTileContents></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-4"><a href="#" class="swan-standard-tile swan-standard-tile-skin-circular"><div class="swan-standard-tile-image"><img src="https://picsum.photos/400/400" class="swan-fluid-image" /></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div></div></a></div></div></div>
Overlay
Use StandardTileOverlay to:
- Position a Callout and a Favorite checkbox on top of the tile's contents.
- In general, display distributed multiple items in a row, across the top of the tile.
The preview has been updated.
<GridContainer><Row><Column span={4}><StandardTile><StandardTileOverlay><Callout>Callout</Callout><Checkbox skin="favorite" aria-label="Add to favorites" /></StandardTileOverlay><StandardTileImage><BasicResponsiveImageaspectRatio={1}src="https://picsum.photos/400/400"/></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column><Column span={4}><StandardTile><StandardTileOverlay><Callout>Callout</Callout><Typography><Icon iconType="check" /><Span>Design templates</Span></Typography></StandardTileOverlay><StandardTileImage><BasicResponsiveImageaspectRatio={1}alt="placeholder image"src="https://via.placeholder.com/400x400/c0e6df/000000?text=image"/></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-4"><div class="swan-standard-tile"><div class="swan-standard-tile-overlay"><span class="swan-callout">Callout</span><span><inputtype="checkbox"class="swan-checkbox swan-checkbox-skin-favorite"aria-label="Add to favorites"/></span></div><div class="swan-standard-tile-image"><divclass="swan-responsive-image-wrapper swan-aspect-ratio-container"style="padding-bottom: 100%"><div class="swan-aspect-ratio-content"><imgsrc="https://picsum.photos/400/400"class="swan-responsive-image"/></div></div></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></div></div><div class="swan-col-4"><div class="swan-standard-tile"><div class="swan-standard-tile-overlay"><span class="swan-callout">Callout</span><div><imgsrc="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="alt=""class="swan-icon swan-icon-mask swan-icon-skin-standard swan-icon-type-check"style='mask-image: url("https://swan.prod.merch.vpsvc.com/v3.0.0-beta.1-hashed/icons/check.433ef8b9d9cf3d5e5f668f4178e2e4ad.svg");'/><span>Design templates</span></div></div><div class="swan-standard-tile-image"><spanclass="swan-responsive-image-wrapper swan-aspect-ratio-container"style="padding-bottom: 100%;"><span class="swan-aspect-ratio-content"><imgalt="placeholder image"src="https://via.placeholder.com/400x400/c0e6df/000000?text=image"class="swan-responsive-image" /></span></span></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></div></div></div></div>
Contents
Color Swatches
Use StandardTileSwatches to present color options. Refer to Color Swatches for more guidelines.
The preview has been updated.
<StandardTile style={{ width: 300 }}><StandardTileImage><BasicResponsiveImagealt="image-alt"aspectRatio={1}src="https://picsum.photos/400/400"/></StandardTileImage><StandardTileContents><StandardTileSwatches><SelectionSet defaultSelectedValue="indigo"><ColorSwatches><SelectionSetInput value="red/black"><SelectionSetLabel aria-label="red/black"><ColorSwatchprimaryColor="red"secondaryColor="black"title="color red/black"/></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="indigo"><SelectionSetLabel aria-label="indigo"><ColorSwatch primaryColor="indigo" title="color indigo" /></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="green"><SelectionSetLabel aria-label="green"><ColorSwatch primaryColor="green" title="color green" /></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="gold"><SelectionSetLabel aria-label="gold"><ColorSwatch primaryColor="gold" title="color gold" /></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="blue"><SelectionSetLabel aria-label="blue"><ColorSwatch primaryColor="blue" title="color blue" /></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="orange"><SelectionSetLabel aria-label="orange"><ColorSwatch primaryColor="orange" title="color orange" /></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="pink"><SelectionSetLabel aria-label="pink"><ColorSwatch primaryColor="pink" title="color pink" /></SelectionSetLabel></SelectionSetInput><SelectionSetInput value="brown"><SelectionSetLabel aria-label="brown"><ColorSwatch primaryColor="brown" title="color brown" /></SelectionSetLabel></SelectionSetInput><SelectionSetInput disabled value="limegreen"><SelectionSetLabel aria-label="limegreen"><ColorSwatch primaryColor="limegreen" title="color lime green" /></SelectionSetLabel></SelectionSetInput><SelectionSetInput disabled value="darkmagenta"><SelectionSetLabel aria-label="darkmagenta"><ColorSwatchprimaryColor="darkmagenta"title="color dark magenta"/></SelectionSetLabel></SelectionSetInput></ColorSwatches></SelectionSet></StandardTileSwatches><StandardTileName>Name</StandardTileName><StandardTilePrice>$price</StandardTilePrice></StandardTileContents></StandardTile>
<div class="swan-standard-tile" style="width: 300px;"><div class="swan-standard-tile-image"><spanclass="swan-responsive-image-wrapper swan-aspect-ratio-container"style="padding-bottom: 100%;"><span class="swan-aspect-ratio-content"><imgalt="image-alt"src="https://picsum.photos/400/400"class="swan-responsive-image" /></span></span></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-swatches"><div role="radiogroup" class="swan-selection-set"><div class="swan-color-swatches"><inputtype="radio"class="swan-selection-set-input swan-radio"value="red/black"id="auto-id-knm9fqzg0-272"name="auto-id-knm9fqzg0-282"/><labelaria-label="red/black"class="swan-selection-set-label"for="auto-id-knm9fqzg0-272"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: red; color: black;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color red/black</span></span></label><inputtype="radio"class="swan-selection-set-input swan-radio"value="indigo"checked=""id="auto-id-knm9fqzg0-273"name="auto-id-knm9fqzg0-282"/><labelaria-label="indigo"class="swan-selection-set-label"for="auto-id-knm9fqzg0-273"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: indigo;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color indigo</span></span></label><inputtype="radio"class="swan-selection-set-input swan-radio"value="green"id="auto-id-knm9fqzg0-274"name="auto-id-knm9fqzg0-282"/><labelaria-label="green"class="swan-selection-set-label"for="auto-id-knm9fqzg0-274"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: green;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color green</span></span></label><inputtype="radio"class="swan-selection-set-input swan-radio"value="gold"id="auto-id-knm9fqzg0-275"name="auto-id-knm9fqzg0-282"/><labelaria-label="gold"class="swan-selection-set-label"for="auto-id-knm9fqzg0-275"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: gold;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color gold</span></span></label><inputtype="radio"class="swan-selection-set-input swan-radio"value="blue"id="auto-id-knm9fqzg0-276"name="auto-id-knm9fqzg0-282"/><labelaria-label="blue"class="swan-selection-set-label"for="auto-id-knm9fqzg0-276"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: blue;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color blue</span></span></label><inputtype="radio"class="swan-selection-set-input swan-radio"value="orange"id="auto-id-knm9fqzg0-277"name="auto-id-knm9fqzg0-282"/><labelaria-label="orange"class="swan-selection-set-label"for="auto-id-knm9fqzg0-277"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: orange;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color orange</span></span></label><inputtype="radio"class="swan-selection-set-input swan-radio"value="pink"id="auto-id-knm9fqzg0-278"name="auto-id-knm9fqzg0-282"/><labelaria-label="pink"class="swan-selection-set-label"for="auto-id-knm9fqzg0-278"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: pink;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color pink</span></span></label><inputtype="radio"class="swan-selection-set-input swan-radio"value="brown"id="auto-id-knm9fqzg0-279"name="auto-id-knm9fqzg0-282"/><labelaria-label="brown"class="swan-selection-set-label"for="auto-id-knm9fqzg0-279"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: brown;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color brown</span></span></label><inputtype="radio"disabled=""class="swan-selection-set-input swan-radio"value="limegreen"id="auto-id-knm9fqzg0-280"name="auto-id-knm9fqzg0-282"/><labelaria-label="limegreen"class="swan-selection-set-label"for="auto-id-knm9fqzg0-280"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: limegreen;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color lime green</span></span></label><inputtype="radio"disabled=""class="swan-selection-set-input swan-radio"value="darkmagenta"id="auto-id-knm9fqzg0-281"name="auto-id-knm9fqzg0-282"/><labelaria-label="darkmagenta"class="swan-selection-set-label"for="auto-id-knm9fqzg0-281"><span class="swan-color-swatch-wrapper"><divaria-disabled="false"role="presentation"class="swan-color-swatch"style="background-color: darkmagenta;"></div><spanclass="swan-color-swatch-accessible-label swan-visually-hidden">color dark magenta</span></span></label></div></div></div><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-price">$price</div></div></div>
Price
Use StandardTilePrice to display product prices. Ensure that the content follows the Pricing component.
The preview has been updated.
<StandardTile style={{ width: 300 }}><StandardTileImage><BasicResponsiveImage aspectRatio={1} src="https://picsum.photos/400/400" /></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription><StandardTilePrice><Pricing><PricingOffer>100 Starting at</PricingOffer>{' '}<PricingComparison><ListPrice>€10.99</ListPrice> <DiscountPrice>€8.99</DiscountPrice></PricingComparison>{' '}<ShortTaxMessage>Inc. VAT</ShortTaxMessage></Pricing></StandardTilePrice></StandardTileContents></StandardTile>
<div class="swan-standard-tile" style="width: 300px"><div class="swan-standard-tile-image"><divclass="swan-responsive-image-wrapper swan-aspect-ratio-container"style="padding-bottom: 100%"><div class="swan-aspect-ratio-content"><imgsrc="https://picsum.photos/400/400"class="swan-responsive-image"/></div></div></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div><div class="swan-standard-tile-price"><span class="swan-pricing"><span class="swan-pricing-offer">100 Starting at</span><span class="swan-pricing-comparison"><span class="swan-list-price">€10.99</span><span class="swan-discount-price">€8.99</span></span><span class="swan-short-tax-message">Inc. VAT</span></span></div></div></div>
Promo Code
Use StandardTilePromoCodeLabel to add a Promo Code to a tile.
The preview has been updated.
<GridContainer><Row><Column span={4}><StandardTile><StandardTileImage><BasicResponsiveImageaspectRatio={1}src="https://picsum.photos/400/400"/></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription><StandardTilePromoCode><StandardTilePromoCodeLabel>50% off with promo code</StandardTilePromoCodeLabel><PromoCode>Promo Code</PromoCode></StandardTilePromoCode></StandardTileContents></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-4"><div class="swan-standard-tile"><div class="swan-standard-tile-image"><divclass="swan-responsive-image-wrapper swan-aspect-ratio-container"style="padding-bottom: 100%"><div class="swan-aspect-ratio-content"><imgsrc="https://picsum.photos/400/400"class="swan-responsive-image"/></div></div></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div><div class="swan-standard-tile-promo-code"><div class="swan-standard-tile-promo-code-label">50% off with promo code</div><div class="swan-promo-code">Promo Code</div></div></div></div></div></div></div>
The preview has been updated.
<StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription><StandardTilePromoCode><StandardTilePromoCodeLabel>50% off with promo code</StandardTilePromoCodeLabel><PromoCode>Promo Code</PromoCode></StandardTilePromoCode></StandardTileContents>
<div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div><div class="swan-standard-tile-promo-code"><div class="swan-standard-tile-promo-code-label">50% off with promo code</div><div class="swan-promo-code">Promo Code</div></div></div>
Footer
Use StandardTileFooter to bottom align the tile’s footer.
The preview has been updated.
<GridContainer><Row><Column span={4}><StandardTile><StandardTileImage><BasicResponsiveImageaspectRatio={1}src="https://picsum.photos/400/400?text=image"/></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>A short description</StandardTileDescription></StandardTileContents><StandardTileFooter><Button width="full-width" skin="secondary">Add to cart</Button></StandardTileFooter></StandardTile></Column><Column span={4}><StandardTile><StandardTileImage><BasicResponsiveImageaspectRatio={1}src="https://picsum.photos/400/400?text=image"/></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>This tile is much, much, much, much, much, much, much, much, much,much, much, much, much, much, much, much, much, much taller.</StandardTileDescription></StandardTileContents><StandardTileFooter><Button width="full-width" skin="secondary">Add to cart</Button></StandardTileFooter></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-4"><div class="swan-standard-tile"><div class="swan-standard-tile-image"><spanclass="swan-responsive-image-wrapper swan-aspect-ratio-container"style="padding-bottom: 100%;"><span class="swan-aspect-ratio-content"><imgsrc="https://picsum.photos/400/400?text=image"class="swan-responsive-image" /></span></span></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">A short description</div></div><div class="swan-standard-tile-footer"><buttontype="button"class="swan-button swan-button-skin-secondary swan-button-full-width">Add to cart</button></div></div></div><div class="swan-col-4"><div class="swan-standard-tile"><div class="swan-standard-tile-image"><spanclass="swan-responsive-image-wrapper swan-aspect-ratio-container"style="padding-bottom: 100%;"><span class="swan-aspect-ratio-content"><imgsrc="https://picsum.photos/400/400?text=image"class="swan-responsive-image" /></span></span></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">This tile is much, much, much, much, much, much, much, much, much,much, much, much, much, much, much, much, much, much taller.</div></div><div class="swan-standard-tile-footer"><buttontype="button"class="swan-button swan-button-skin-secondary swan-button-full-width">Add to cart</button></div></div></div></div></div>
Horizontal
Use layout="horizontal" to position the image on the left and the text contents on the right.
The preview has been updated.
<GridContainer><Row><Column span={6}><StandardTile layout="horizontal"><StandardTileImage><BasicResponsiveImageaspectRatio={1}src="https://picsum.photos/400/400?text=image"/></StandardTileImage><StandardTileContents><StandardTileName>Name</StandardTileName><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-6"><div class="swan-standard-tile swan-standard-tile-horizontal"><div class="swan-standard-tile-image"><divclass="swan-responsive-image-wrapper swan-aspect-ratio-container"style="padding-bottom: 100%"><div class="swan-aspect-ratio-content"><imgsrc="https://picsum.photos/400/400?text=image"class="swan-responsive-image"/></div></div></div><div class="swan-standard-tile-contents"><div class="swan-standard-tile-name">Name</div><div class="swan-standard-tile-description">Description</div></div></div></div></div></div>
As a Link
Use a Link with covering to make the entire Tile behave as a Link. Refer to covering guidelines.
Info:
Only wrap the Link around the content that should be included in the accessible name, which is usually the title or call-to-action.
The preview has been updated.
<GridContainer><Row><Column span={4}><StandardTile><StandardTileImage><FluidImage src="https://picsum.photos/400/400?id=1" /></StandardTileImage><StandardTileContents><Link href="#" covering><StandardTileName>Title link</StandardTileName></Link><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-4"><div class="swan-standard-tile"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/400/400?id=1"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><a href="#" class="swan-link swan-link-covering"><div class="swan-standard-tile-name">Title link</div></a><div class="swan-standard-tile-description">Description</div></div></div></div></div></div>
Use skin="unstyled" on the Link to remove the normal link styling.
The preview has been updated.
<GridContainer><Row><Column span={4}><StandardTile><StandardTileImage><FluidImage src="https://picsum.photos/400/400?id=1" /></StandardTileImage><StandardTileContents><Link href="#" covering skin="unstyled"><StandardTileName>Title link</StandardTileName></Link><StandardTileDescription>Description</StandardTileDescription></StandardTileContents></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-4"><div class="swan-standard-tile"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/400/400?id=1"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><ahref="#"class="swan-link swan-link-skin-unstyled swan-link-covering"><div class="swan-standard-tile-name">Title link</div></a><div class="swan-standard-tile-description">Description</div></div></div></div></div></div>
Use StandardTileSeparatelyClickableContents wrapped around a separate Link to add an additional Link to the Tile content.
The preview has been updated.
<GridContainer><Row><Column span={4}><StandardTile><StandardTileImage><FluidImage src="https://picsum.photos/400/400?id=1" /></StandardTileImage><StandardTileContents><Link href="#" covering><StandardTileName>Title link</StandardTileName></Link><StandardTileDescription>Description</StandardTileDescription><StandardTileSeparatelyClickableContents><Link href="#otherlink">Separate link</Link></StandardTileSeparatelyClickableContents></StandardTileContents></StandardTile></Column></Row></GridContainer>
<div class="swan-grid-container"><div class="swan-row"><div class="swan-col-4"><div class="swan-standard-tile"><div class="swan-standard-tile-image"><imgsrc="https://picsum.photos/400/400?id=1"class="swan-fluid-image"/></div><div class="swan-standard-tile-contents"><a href="#" class="swan-link swan-link-covering"><div class="swan-standard-tile-name">Title link</div></a><div class="swan-standard-tile-description">Description</div><div class="swan-standard-tile-separately-clickable-contents"><a href="#otherlink" class="swan-link">Separate link</a></div></div></div></div></div></div>
Accessibility
- If a sequence of tiles is semantically a list, as is usually the case (e.g., a list of products), then the layout grid elements around the tiles should use ul and li tags, so that the tiles are grouped semantically into a list. In the Vanilla API, use
<ul class="swan-row">and<li class="swan-col-N">for the grid elements around the tiles. - Tile images have a specific requirement for
altattributes:- Use an empty
altattribute for images when nearby HTML text already describes the image, to prevent screen readers from repeating the same content twice. - When SEO is a priority, use
role="presentation"andaria-hidden="true"for tile images within the same hyperlink as the tile name. This hides the image from assistive technologies but not from screens or search engines.
- Use an empty
