IconTiles are used to represent objects and resources, either unrelated, or directly related to a product.
Usage
When to use
When displaying an object, or as part of a page title.
When not to use
Inline in a string of text, such as a paragraph where an object is referred or linked to.
Color
Use Neutral if the object or page is not a feature of a specific product, but is something universal. For example, for a "Dashboard" or "User" page.
Use a product-specific color for objects or pages that are 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 use the size that best fits any supporting text or UI. For example, don’t use large IconTiles 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
IconTiles should not appear without accompanying content. They should be presented alongside a text label for the object or page they are being used to represent. Think of them as an accessory.
How to use
<Hds::IconTile @logo="boundary" @size="medium" iconSecondary="plus" />
<Hds::IconTile @icon="dashboard" @size="small" @color="vault" />
Component API
- Name
-
size - Type
-
enum - Values
-
- small
- medium (default)
- large
- Name
-
logo - Type
-
enum - Values
-
- hcp
- boundary
- consul
- nomad
- packer
- terraform
- vagrant
- vault
- waypoint
- Description
- Use this parameter to show a product logo.
- Name
-
icon - Type
-
string - Description
- Use this parameter to show an icon. Any icon name is acceptable.
- Name
-
iconSecondary - Type
-
string - Description
- 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.
- Name
-
color - Type
-
enum - Values
-
- neutral (default)
- boundary
- consul
- nomad
- packer
- terraform
- vagrant
- vault
- waypoint
- Description
-
The
@colorparameter is overwritten if a@logoparameter is passed, in which case the product "brand" color is used.
- Name
-
…attributes - Description
-
This component supports use of
...attributes.
Anatomy
| Element | Usage |
|---|---|
| Container | Required |
| Icon | Required |
| Secondary Icon | Optional |
Conformance rating
When used as recommended, there should not be any accessibility issues with this component.
Accounting for screen readers
IconTiles should be hidden from screen readers.
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, please let us know by submitting an issue.