Component | Secondary Tile

styleKeyssecondaryTile

Develop

Secondary Tile is typically used in conjunction with the grid in order to lay out a number of tiles in a row.

Secondary Tile is composed of a number of sub-components. (The React components are named below. The vanilla API uses CSS classes with similar names.)

SecondaryTile itself typically has two children:

SecondaryTileImage - wrapper for the image
SecondaryTileContents - wrapper for the contents

Inside of the SecondaryTileContents there are more sub-components, all of which are optional except for the name:

SecondaryTileName
SecondaryTilePrice
SecondaryTileNameWithPrice - optional wrapper which allows the name and price to be on the same line
SecondaryTileBadges - wrapper for anyBadges
SecondaryTileDescription

If the entire tile is clickable as a link that takes the user to another page, you should make the tile an <a> tag.

<SecondaryTile component="a" href="someurl" />
<a class="secondary-tile" href="someurl"></a>

Note that the component property can accept any React component as well as any HTML tag, so if you're using React Router's Link component, you could also pass component={Link}! /

Any Secondary Tile that is an <a> tag will have its height equalized, so that all such tiles in the same grid row will have the same visible height.

If a clickable tile doesn't have a "CTA link" appearance (see below), we recommend adding class secondary-tile-shadow-hover to give the tile a drop shadow when hovered over, to provide some affordance that the tile is clickable.

/*
 not yet natively supported in the React component, 
 but you can add the className to the Secondary Tile
*/
<a href="somehref" class="secondary-tile secondary-tile-shadow-hover"></a>

If a clickable tile has just a name and no other accompanying information (no price, badge, etc), you should add the "CTA link" look to the tile's name.

Secondary Tile is commonly used with Selection Set in order to display a set of options with images.

Just place a Secondary Tile inside a Selection Set's label (in React, right inside the SelectionSetLabel component).

You can add a Badge to a Secondary Tile. The Badge(s) goes inside a "badges container" that typically sits at the top or bottom of the contents container.

<SecondaryTileContents>
  <SecondaryTileBadges>
    <Badge>New</Badge>
  </SecondaryTileBadges>
  <SecondaryTileName>Name</SecondaryTileName>
  <SecondaryTileDescription>Description</SecondaryTileDescription>
</SecondaryTileContents>
<div class="secondary-tile-contents">
  <div class="secondary-tile-badges">
    <span class="badge">New</span>
  </div>
  <div class="secondary-tile-name">Name</div>
  <div class="secondary-tile-description">Description</div>
</div>

Secondary Tiles can be made horizontal, so that the image sits to the left of the contents.

<SecondaryTile layout="horizontal" />
<div class="secondary-tile secondary-tile-horizontal"></div>

For horizontal tiles, if you'd like to show the price on the same line as the name, you can utilize the "name with price" sub-component. It then wraps both the name and the price.

Sometimes we add a launcher button that launches a dialog where the user can select an option. The button typically displays the currently-selected value, and the adjacent label describes the button.

SecondaryTile

Prop	Type	Default	Description
layout	"horizontal" \| "vertical"	vertical	Whether the tile is vertically or horizontally oriented

All other props are forwarded to the element specified in thecomponentprop(default: <div/>)