The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Used to display an icon in a tile-like object.

Icon Tiles represent objects and resources unrelated or directly related to a product.

Usage

When to use

To represent an object or as part of a page title.

When not to use

Within a paragraph where an object is referred to.

Color

Use Neutral if the object or page is not a specific product feature but something universal. For example, for a “Dashboard” or “User” page.

Use a product-specific color for objects or pages directly related to a product. For example:

  • For a page showing a “Consul cluster”
  • In a card or table row that represents a “Consul cluster”

Examples

Size

Medium is the default size, but we recommend using the size that best fits the supporting text or UI. For example, don’t use large Icon Tiles in tables.

Secondary icon

A secondary icon can be added to provide additional context. For example, for an “Add user” page the “plus” icon indicates the action.

Using with content

Icon Tiles should not appear without accompanying content. Instead, they should be presented alongside a text label for the object or page they are being used to represent. We recommend thinking of them as an accessory.

How to use this component

The default invocation requires an @icon argument or a @logo argument. If providing an @icon argument, it renders a medium neutral Icon Tile. If providing a @logo argument, it renders the logo in the relevant brand styles.

<Hds::IconTile @icon="user" />
<Hds::IconTile @logo="vault" />

Colors

A different color Icon Tile can be invoked using the @color argument.

<Hds::IconTile @color="waypoint" @icon="user" />

Size

A different size Icon Tile can be invoked using the @size argument.

<Hds::IconTile @logo="boundary" @size="small" />
<Hds::IconTile @logo="packer" @size="large" />

Secondary icon

To add a secondary icon, use the @iconSecondary argument with any icon as the value.

<Hds::IconTile @icon="user" @iconSecondary="plus" />

Component API

size enum
  • small
  • medium (default)
  • large
color enum
  • neutral (default)
  • boundary
  • consul
  • nomad
  • packer
  • terraform
  • vagrant
  • vault
  • vault-secrets
  • waypoint
The @color parameter is overwritten if a @logo parameter is passed, in which case the product “brand“ color is used.
logo enum
  • hcp
  • boundary
  • consul
  • nomad
  • packer
  • terraform
  • vagrant
  • vault
  • vault-secrets
  • vault-radar
  • waypoint
Use this parameter to show a product logo.
icon string
Use this parameter to show an icon. Any icon name is acceptable.
iconSecondary string
Use this parameter to show an extra “badge” with icon on top of the tile. Any icon name is acceptable. The color of the secondary icon is predefined and can’t be changed.
…attributes
This component supports use of ...attributes.

Anatomy

IconTile anatomy

Element Usage
Container Required
Icon Required
Secondary icon Optional

Conformance rating

Conformant

When used as recommended, there should not be any accessibility issues with this component.

Accounting for screen readers

Because Icon Tiles are purely decorative, they’re hidden from screen readers by default.

Accessibility example of an IconTile

Applicable WCAG Success Criteria

This section is for reference only. This component intends to conform to the following WCAG Success Criteria:

  • 1.4.11 Non-text Contrast (Level AA):
    The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): user interface components; graphical objects.


Support

If any accessibility issues have been found within this component, let us know by submitting an issue.