Tile

Tiles are presentational components, useful for presenting consequential information in a compact, consistent format.

Overview

Tiles can contain supportive icons, a heading, and a description, and offer support for slotted, non-interactive content.

Usage

  • Display of key content or information
  • Selection workflows
  • Primary navigational actions

Sample

3 samples
1
2
<calcite-tile icon="3d-glasses" heading="Special viewing glasses"
    description="Great for eclipses and optical illusions"></calcite-tile>
v3.0.3

Best practices

While visually similar to the Card, a Tile has distinct capabilities and intended use cases.

Comparison

TileThis component
Best used to represent one of a limited number of options, actions, or choices.
The component is wholly focusable - it may not contain slotted focusable elements.
CardAlternative
Most often used to represent a single entity or item that is part of a group.
Can contain custom content and supports multiple slotted focusable elements.

Recommendations

A Tile is a single focusable element and should not contain slotted interactive elements, whereas Cards may contain one or many individually focusable elements. Because the entire element is interactive, avoid placing focusable elements within the Tile to ensure users can interact with the Tile as a single entity.

Correct Tile Select groups
Do use Tiles in groups as categorical identifiers.
Avoid Tile Select primary actions
Avoid using Tiles for user actions.

Writing and copy

Text for Tiles should be on the shorter side, and as concise as possible.

  • Use sentence case for heading and description
  • End description with proper punctuation
  • Avoid forming questions in Tiles
  • Recommended heading character maximum: 50
  • Recommended description character maximum: 175

API reference

Properties

PropertyAttributeDescriptionTypeDefault
activeactiveWhen true, the component is active.booleanfalse
alignmentalignmentSpecifies the alignment of the Tile's content."center" | "start""start"
descriptiondescriptionA description for the component, which displays below the heading.string
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
embedembed
deprecatedNo longer necessary.
The component's embed mode. When true, renders without a border and padding for use by other components.
booleanfalse
headingheadingThe component header text, which displays between the icon and description.string
hrefhrefWhen embed is "false", the URL for the component.string
iconiconSpecifies an icon to display.string
iconFlipRtlicon-flip-rtlWhen true, the icon will be flipped when the element direction is right-to-left ("rtl").booleanfalse
labellabelAccessible name for the component.string
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectedselectedWhen true and the parent's selectionMode is "single", "single-persist"', or "multiple"`, the component is selected.booleanfalse

Slots

NameDescription
content-topA slot for adding non-actionable elements above the component's content. Content slotted here will render in place of the icon property.
content-bottomA slot for adding non-actionable elements below the component's content.
content-start
deprecated use content-top slot instead. A slot for adding non-actionable elements before the component's content.
content-end
deprecated use content-bottom slot instead. A slot for adding non-actionable elements after the component's content.

Styles

NameDescription
--calcite-tile-accent-color-pressWhen the parent calcite-tile-group has a selectionMode that is not "none", specifies the color of the component's selection elements, such as the radio, checkbox, and border.
--calcite-tile-background-colorSpecifies the component's background color.
--calcite-tile-border-colorSpecifies the component's border color.
--calcite-tile-corner-radiusSpecifies the component's corner radius.
--calcite-tile-heading-text-colorSpecifies the component's heading text color.
--calcite-tile-shadowSpecifies the shadow around the component.
--calcite-tile-text-colorSpecifies the component's description and icon text color, but not the heading text color.

Events

NameDescriptionBehavior
calciteTileSelectFires when the selected state of the component changes.bubblescomposedcancelable

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close