Skip to main content

Tile

Tiles allow users to choose from multiple options to explore content or complete tasks. They contain short overviews of information so users can quickly scan and make decisions.

Also known as: app tile, card, content block, content card, info tile, panel, summary card, tile card

Variations

Use bolt-tile components within a bolt-tile-group to display related interactive content.

<bolt-tile-group>
        <bolt-tile href="#" label="Tile label">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</bolt-tile>
        <bolt-tile href="#" label="Tile label">Tile content here </bolt-tile>
        <bolt-tile href="#" label="Tile label">Tile content here </bolt-tile>
</bolt-tile-group>
<bolt-tile-group>
        <bolt-tile href="#" utilityicon="lock-closed" label="Tile label">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</bolt-tile>
        <bolt-tile href="#" utilityicon="lock-closed" label="Tile label">Tile content here </bolt-tile>
        <bolt-tile href="#" label="Tile label">Tile content here </bolt-tile>
</bolt-tile-group>

For dark mode compatibility, brand icons or other images may need to make use of theme display utilities.

 
<bolt-tile-group>
    <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg"></bolt-tile>
    <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg"></bolt-tile>
    <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg"></bolt-tile>
    <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg"></bolt-tile>
</bolt-tile-group>
<bolt-tile-group>
        <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </bolt-tile>
        <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg">Tile content here </bolt-tile>
        <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg">Tile content here </bolt-tile>
</bolt-tile-group>
<bolt-tile-group>
    <bolt-tile href="#" label="Tile label">
      <img
        slot="thumbnail"
        src="../../images/thumbnail-placeholder-image.svg"
        alt="Sample thumbnail"
      />
    </bolt-tile>
    <bolt-tile href="#" label="Tile label">
      <img
        slot="thumbnail"
        src="../../images/thumbnail-placeholder-image.svg"
        alt="Sample thumbnail"
      />
      Tile content here
    </bolt-tile>
    <bolt-tile href="#" label="Tile label">
      <img
        slot="thumbnail"
        src="../../images/thumbnail-placeholder-image.svg"
        alt="Sample thumbnail"
      />
      Tile content here
    </bolt-tile>
</bolt-tile-group>
<bolt-tile-group>
        <bolt-tile href="#" label="Tile label" subheading="section title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </bolt-tile>
        <bolt-tile href="#" label="Tile label" subheading="section title">Tile content here </bolt-tile>
        <bolt-tile href="#" label="Tile label" subheading="section title">Tile content here </bolt-tile>
</bolt-tile-group>
<bolt-tile-group>
  <bolt-tile href="#" label="Tile label" img="web/components/tile/driveway.jpg" bgposition="bottom"></bolt-tile>
  <bolt-tile href="#" label="Tile label" img="web/components/tile/driveway.jpg" bgposition="bottom"></bolt-tile>
  <bolt-tile href="#" label="Tile label" img="web/components/tile/driveway.jpg" bgposition="bottom">Tile content here </bolt-tile>
  <bolt-tile href="#" label="Tile label" img="web/components/tile/driveway.jpg" bgposition="bottom">Tile content here </bolt-tile>
</bolt-tile-group>

Tile - Overlay

Tiles which have an image and no body copy can display the label as an overlay.

<bolt-tile-group>
  <bolt-tile type="overlay" zoom="false" href="#" img="web/components/tile/boots.jpg" label="Tile label"></bolt-tile>
  <bolt-tile type="overlay" zoom="false" href="#" img="web/components/tile/boots.jpg" label="Tile label"></bolt-tile>
  <bolt-tile type="overlay" zoom="false" href="#" img="web/components/tile/boots.jpg" label="Tile label"></bolt-tile>
  <bolt-tile type="overlay" zoom="false" href="#" img="web/components/tile/boots.jpg" label="Learn how to grow your agency with Nationwide"></bolt-tile>
  <bolt-tile type="overlay" zoom="false" href="#" img="web/components/tile/boots.jpg" label="Take retirement one step at a time"></bolt-tile>
  <bolt-tile type="overlay" zoom="false" href="#" img="web/components/tile/boots.jpg" label="Protecting a furry friend"></bolt-tile>
</bolt-tile-group>

Tile - Columns

By default, tiles will be displayed in up to 4 columns as screen space permits, with tiles distributed as equally as possible between multiple rows. You may override this layout by specifying a number of columns to display.

<bolt-tile-group columns="2">
    <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg"></bolt-tile>
    <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg"></bolt-tile>
    <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg"></bolt-tile>
    <bolt-tile href="#" label="Tile label" icon="web/components/tile/map-outline.svg"></bolt-tile>
</bolt-tile-group>

Grid Usage

Tiles can be used in combination with Bolt's grid system to achieve variety of layouts.

<div class="bolt-row">
    <div class="bolt-col-12 bolt-col-md-6">
        <bolt-tile label="Tile label" icon="web/components/tile/map-outline.svg">Tile content here</bolt-tile>
    </div>
    <div class="bolt-col-12 bolt-col-md-6">
        <div class="bolt-row">
            <div class="bolt-col">
                <bolt-tile label="Tile label" icon="web/components/tile/map-outline.svg">Tile content here</bolt-tile>
            </div>
        </div>
        <div class="bolt-row">
            <div class="bolt-col">
                <bolt-tile label="Tile label" icon="web/components/tile/map-outline.svg">Tile content here</bolt-tile>
            </div>
        </div>
    </div>
</div>
<div class="bolt-row">
    <div class="bolt-col-12 bolt-col-md-4">
        <bolt-tile label="Tile label">Tile content here</bolt-tile>
    </div>
    <div class="bolt-col-12 bolt-col-md-8">
        <bolt-tile label="Tile label" subheading="section title title" img="images/placeholder-image.svg">Tile content here</bolt-tile>
    </div>
</div>
<div class="bolt-row">
    <div class="bolt-col-12 bolt-col-md-4">
        <bolt-tile label="Tile label">Tile content here</bolt-tile>
    </div>
    <div class="bolt-col-12 bolt-col-md-8">
        <bolt-tile imageheight="fill" label="Tile label" subheading="section title title" img="images/placeholder-image.svg">Tile content here</bolt-tile>
    </div>
</div>
 Code reference

The bolt-tile-group component takes one parameter:

  • columns : optional. Override the default column behavior by specifying 2, 3, or 4 columns of tiles

The bolt-tile component should be used inside of a bolt-tile-group.

Each tile may have either an icon or img parameter, but not both. Slotted content is optional and will appear as body text on the tile if present.

The tile with thumbnail variation cannot be combined with the icon parameter.

Parameters

  • label : required. The label for the tile.
  • subheading : optional. Subheading text displayed above the main tile label.
  • imageheight : optional. proportional (default) or fill. By default, the image on a tile will be sized proportional to its width, and all image tiles in a row will have a consistent height. fill will cause the image to fill the available height on the tile, useful for using an image tile within advanced grid layouts.
  • zoom : optional. true (default) or false to disable image zoom on mouse hover/keyboard focus.
  • icon : optional. The file path to an icon to be displayed next to the tile label.
  • utilityicon : optional. chevron-right(default) or lock-closed. Configures the utility icon next to tile label text. Can be applied to one or more tiles in a tile-group.
  • img : optional. The file path to an image to be displayed on the tile.
  • type : optional. overlay will display the label as an overlay for tiles that have an image but no body copy.
  • href : required. The URL the tile should navigate to when clicked.
  • linktarget : optional. Passes a target attribute to the underlying link element. If the link opens in a new tab, this should be communicated either by the tile's content, or by adding a title to the link.
  • linktitle : optional. Passes a title attribute to the underlying link element.

For overlay tiles, the background position can be modified using:

  • bgposition : optional. Accepts any valid background-position CSS parameter, such as center(default), top, bottom, left, right, or percentage values.

Slots

  • thumbnail : optional. Slot for a thumbnail image. The thumbnail within the slot is constrained to a max-width of 64px.
 Design guidelines

General guidelines

  • Use an arrangement of tiles that allows plenty of horizontal space for labels and body copy.
  • When in a row, all Tiles should have a uniform height based on the tallest Tile.
  • The entire Tile should function as the clickable element.
  • Consider using an icon or image that best illustrates a Tile's label and optional body copy.
  • Tags may be added below the body content of a Tile to increase scanability of large amounts of content.

When to use

  • When it is desirable to have one access point for several tasks or content pieces that live on different pages.
  • When it would be beneficial for users to see short overviews of content before going deeper to read more about a topic.
  • Consider using in filtering scenarios, such as searches for articles.

When not to use

  • Avoid if Links or another pattern is more appropriate for providing navigation to different screens or downloads.
  • Avoid if multiple Tiles in a group would link to the same page or process, even if the each Tile content is different.

When to use something else

  • Use Modal or Contextual help instead of a Tile when elevation is needed for revealing secondary information, actions, or Notifications.
  • Avoid if there is only one option to choose from; use a Button or Link instead.
  • It is OK if Tiles used in filtering scenarios only produce one result based on user selections.
  • Avoid if multiple interactions are desired inside a component; use a card instead.

Do

  • Use Tiles to group related information or actions.
  • Use a consistent gap between Tiles, both vertically and horizontally.
  • Use an arrangement of Tiles with ample horizontal space for labels and body copy.
  • Use Tiles to visually highlight and provide navigation to a group of related screens with prominent content or features.

Don't

  • Don’t mix Tiles with similar components in a group.
  • Don’t center text and content.
  • Don’t place additional buttons, links or interactive components in a Tile.
  • Don’t make a Tile static. Tiles must link to a page or document.

Content guidelines

  • Labels should be as short as possible with “trigger words” explaining the Tile’s purpose.
  • Verify whether the length of a Tile’s label and body copy works well in the context of all screen layouts.
  • A Tile’s label should use sentence case.
  • Section title text should use all caps.
  • Tile labels should clearly describe the content or main feature of the screen the Tile links to.
  • Tiles that open a PDF should use the label format: DocumentName (PDF).
 Accessibility

Accessibility compliance

  • WCAG 2.2 Compliant
  • JAWS 2025 Tested
  • NVDA 2025 Tested
  • VoiceOver Tested
  • Keyboard Tested
  • aXe Tested

If the tile link opens in a new tab, this should be communicated either by the tile's content, or by adding a title to the link. For example:

<bolt-tile href="#" linktarget="_blank" linktitle="Opens in new tab" label="Tile label">Tile content here </bolt-tile>

When using the tile on background colors, assure there is proper contrast.

  • Tile background to container background must meet a 3:1 contrast.
  • OR, the tile border to container background must meet a 3:1 contrast.
  • If neither are met, then another background color should be chosen.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.

Display settings

Note: not all settings persist across pages

Default Compact (-1) Sparse (+1) XL (default) 2XL 3XL Default Min Max Light (default) System Dark Branded (default) Unbranded