diff --git a/README.md b/README.md
index 4c335721387..24b0f5dc327 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+TEST
+
# Carbon Design System
diff --git a/src/pages/components/tile/code.mdx b/src/pages/components/tile/code.mdx
index 78206deb16e..2abb504def4 100755
--- a/src/pages/components/tile/code.mdx
+++ b/src/pages/components/tile/code.mdx
@@ -6,6 +6,9 @@ description:
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---
+import { CheckmarkFilled } from '@carbon/icons-react';
+import { Tag } from '@carbon/react';
+
Preview the tile component with the React live demo. For detailed code usage
@@ -23,6 +26,7 @@ documentation, see the Storybooks for each framework below.
>
+Feature flag
@@ -58,6 +62,29 @@ documentation, see the Storybooks for each framework below.
+### Feature flags
+
+[Feature flags](/components/overview/feature-flags/) have been added to the
+clickable, selectable, and expandable variants of tile to improve accessibility
+and changes its visual appearance, not its functionality. For more code-specific
+feature flag information, refer to the
+[@carbon/react](https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags-tile--overview)
+framework.
+
+- The `enable-experimental-tile-contrast` flag adds a border to the tile with
+ improved contrast for accessibility and to visually indicate they are
+ operable.
+- The `enable-v12-tile-default-icons` flag enables the rendering of default
+ icons on the clickable variant of tile like the ArrowRight icon for navigation
+ or Error icon when it is disabled if the user hasn't configured a different
+ icon already.
+- The `enable-v12-tile-default-icons` flag enables the rendering of default
+ icons on the clickable variant of a tile, such as the ArrowRight icon for
+ navigation or the Error icon when the tile is disabled. If the user hasn't
+ configured a different icon, these defaults will be used.
+- The `enable-v12-tile-radio-icons` flag changes RadioTile to use radio button
+ icons instead of a checkmark icons.
+
## Live demo
The following page documents visual specifications such as color, typography,
-and structure.
+structure, and AI presence.
@@ -28,99 +28,166 @@ and structure.
## Color
-
+### Base tile color
-The tile border applies to clickable, selectable and expandable tiles — not to
-base tiles.
+| Element | Property | Color token |
+| --------- | ---------------- | --------------- |
+| Container | background-color | `$layer` \* |
+| Text | text color | `$text-primary` |
-
+
+
+
+
+
+Base tile color
+
+
+
+
+### Clickable tile color
-| Element | Property | Color token |
-| --------------- | ---------------- | ------------------- |
-| Tile:background | background-color | `$layer` \* |
-| Tile border | border | `$border-tile` \* |
-| Icon | svg | `$icon-interactive` |
-| Checkbox icon | svg | `$icon-primary` |
-| Checkmark icon | svg | `$icon-primary` |
-| Chevron icon | svg | `$icon-primary` |
+Clickable tiles have an available
+[feature flag](/components/overview/feature-flags/).
+
+| Element | Property | Color token |
+| --------------------- | ---------------- | ------------------- |
+| Container | background-color | `$layer` \* |
+| Text | text color | `$text-primary` |
+| Border (feature flag) | border | `$border-tile` \* |
+| Icon | svg | `$icon-interactive` |
- * Denotes a contextual color token that will change values based on the layer
+ \* Denotes a contextual color token that will change values based on the layer
it is placed on.
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-
- The example shows layering tokens applied across layers in the Gray 100 theme.
-
+Clickable tile interactive state color
-### Interactive states
-
-| Element | Property | Color token |
-| ---------------------------- | ---------------- | ------------------ |
-| Tile:hover | background-color | `$layer-hover` \* |
-| Tile:focus | border | `$focus` |
-| Tile:selected | border | `$border-inverse` |
-| Tile:disabled | border | `$border-disabled` |
-| Icon:disabled (or pictogram) | svg | `$icon-disabled` |
-| Text:disabled | text color | `$text-disabled` |
+| State | Element | Property | Color token |
+| -------- | --------- | ---------------- | ------------------ |
+| Hover | Container | background-color | `$layer-hover` \* |
+| Focus | Container | border | `$focus` |
+| Disabled | Container | border | `$border-disabled` |
+| | Text | text color | `$text-disabled` |
+| | Icon | svg | `$icon-disabled` |
- * Denotes a contextual color token that will change values based on the layer
+ \* Denotes a contextual color token that will change values based on the layer
it is placed on.
-#### Base tile
-
-Base tile doesn't have a border. It's not interactive, but can have interactive
-elements. Base tile only has the enabled state.
-
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-#### Clickable tile
+### Selectable tile color
-Clickable tile has four states: enabled, hover, focus, and disabled.
+Selectable tiles have available
+[feature flags](/components/overview/feature-flags/).
+
+| Element | Property | Color token |
+| --------- | ---------------- | ----------------- |
+| Container | background-color | `$layer` \* |
+| Text | text color | `$text-primary` |
+| Border | border | `$border-tile` \* |
+| Icon | svg | `$icon-primary` |
+
+
+ \* Denotes a contextual color token that will change values based on the layer
+ it is placed on.
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-#### Selectable tiles
+Selectable tile interactive state color
-Selectable tiles have five states: enabled, hover, focus, selected, and
-disabled.
+| State | Element | Property | Color token |
+| -------------- | --------- | ---------------- | ------------------ |
+| Hover | Container | background-color | `$layer-hover` \* |
+| Hover selected | Container | background-color | `$layer-hover` \* |
+| | | border | `$border-inverse` |
+| Selected | Container | border | `$border-inverse` |
+| Focus | Container | border | `$focus` |
+| Disabled | Container | border | `$border-disabled` |
+| | Text | text color | `$text-disabled` |
+| | Icon | svg | `$icon-disabled` |
+
+
+ \* Denotes a contextual color token that will change values based on the layer
+ it is placed on.
+
-
-
+
-
+
-
+
-
+
@@ -129,23 +196,31 @@ disabled.
-#### Expandable tiles
+### Expandable tile color
-Expandable tiles have three states: enabled, hover, and focus.
+Expandable tiles have an available
+[feature flag](/components/overview/feature-flags/).
+
+| Element | Property | Color token |
+| --------- | ---------------- | ----------------- |
+| Container | background-color | `$layer` \* |
+| | text color | `$text-primary` |
+| | border | `$border-tile` \* |
+| Icon | svg | `$icon-primary` |
-
+
-
+
-
+
-
+
@@ -154,41 +229,161 @@ Expandable tiles have three states: enabled, hover, and focus.
-## Typography
+Expandable tile interactive state color
-The default token for the title is `$body-compact-01`, although it can be
-altered as needed by the product teams.
+| State | Element | Property | Color token |
+| -------- | --------- | ---------------- | ------------------ |
+| Hover | Container | background-color | `$layer-hover` \* |
+| Focus | Container | border | `$focus` |
+| Disabled | Container | border | `$border-disabled` |
+| | Text | text color | `$text-disabled` |
+| | Icon | svg | `$icon-disabled` |
-| Element | Font-size (px/rem) | Font-weight | Type token |
-| ----------- | ------------------ | ------------- | ------------------ |
-| Tile | 14 / 0.875 | Regular / 400 | `$body-compact-01` |
-| Description | 14 / 0.875 | Regular / 400 | `$body-compact-01` |
+
+ \* Denotes a contextual color token that will change values based on the layer
+ it is placed on.
+
-## Structure
+
+
+
-| Element | Property | px / rem | Spacing token |
-| ------- | ----------------- | -------- | ------------- |
-| Tile | min-height | 64 / 4 | – |
-| | min-width | 128 / 8 | – |
-| | padding (minimum) | 16 / 1 | `$spacing-05` |
+
-
-
+
+
+
+
+
-
+
+
+
+
+
-
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
-Structure and spacing measurements for tile | px / rem
+## Typography
+
+The default token for tile titles is `$body-compact-01`, although it can be
+customized as needed by product teams.
+
+| Element | Font-size (px/rem) | Font-weight | Type token |
+| ------- | ------------------ | ------------- | ------------------ |
+| Title | 14 / 0.875 | Regular / 400 | `$body-compact-01` |
+
+## Structure
+
+### Base tile structure
+
+| Element | Property | px / rem | Spacing token |
+| --------- | --------------------------- | -------- | ------------- |
+| Container | min-height | 64 / 4 | – |
+| | min-width | 128 / 8 | – |
+| Content | padding-top, padding-bottom | 16 / 1 | `$spacing-05` |
+| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+
+
+
+
+
+
+
+Structure and spacing measurements for base tile | px / rem
+
+### Clickable tile structure
+
+| Element | Property | px / rem | Spacing token |
+| --------- | --------------------------- | --------- | ------------- |
+| Container | min-height | 64 / 4 | – |
+| | min-width | 128 / 8 | – |
+| Content | padding-top, padding-bottom | 16 / 1 | `$spacing-05` |
+| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+| Icon | padding-top, padding-bottom | 12 / 0.75 | `$spacing-04` |
+| | padding-left, padding-right | 12 / 0.75 | `$spacing-04` |
+| | size | 20px | – |
+
+
+
+
+
+
+
+
+ Structure and spacing measurements for clickable tile with the feature flag
+ enabled | px / rem
+
+
+### Selectable tile structure
+
+| Element | Property | px / rem | Spacing token |
+| --------- | --------------------------- | -------- | ------------- |
+| Container | min-height | 64 / 4 | – |
+| | min-width | 128 / 8 | – |
+| Content | padding-top, padding-bottom | 16 / 1 | `$spacing-05` |
+| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+| Icon | padding-top, padding-bottom | 16 / 1 | `$spacing-05` |
+| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+| | size | 16px | – |
+
+
+
+
+
+
+
+
+ Structure and spacing measurements for selectable tile with the feature flags
+ enabled | px / rem
+
+
+### Expandable tile structure
+
+| Element | Property | px / rem | Spacing token |
+| --------- | --------------------------- | -------- | ------------- |
+| Container | min-height | 64 / 4 | – |
+| | min-width | 128 / 8 | – |
+| Content | padding-top, padding-bottom | 16 / 1 | `$spacing-05` |
+| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+| Icon | padding-top, padding-bottom | 16 / 1 | `$spacing-05` |
+| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+| | size | 16px | – |
+| Link | padding-bottom | 16 / 1 | `$spacing-05` |
+| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+
+
+
+
+
+
+
+
+ Structure and spacing measurements for expandable tile with the feature flag
+ enabled | px / rem
+
### Proportions for grid
@@ -222,14 +417,14 @@ For more information on the AI style elements, see the
| AI label | size | mini |
- * Denotes a contextual color token that will change values based on the layer
+ \* Denotes a contextual color token that will change values based on the layer
it is placed on.
-
+
diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx
index a0097667a1b..b4f3fc5b684 100755
--- a/src/pages/components/tile/usage.mdx
+++ b/src/pages/components/tile/usage.mdx
@@ -1,15 +1,19 @@
---
title: Tile
description:
- Tiles are a flexible component for displaying a wide variety of content,
- including informational, getting started, how-to, next steps, and more.
+ Tiles are a highly flexible component for displaying a wide variety of
+ content, including informational, getting started, how-to, next steps, and
+ more.
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---
import A11yStatus from 'components/A11yStatus';
+import { Tag } from '@carbon/react';
+Feature flag
+
Tiles are a highly flexible component for displaying a wide variety of content,
including information, getting started, how-to, next steps, and more.
@@ -22,13 +26,6 @@ Tile
changes the visual appearance of the component and introduces an AI
explainability feature when AI is present in the component.
-
-
-Additionally, a visual accessibility enhancement is available with
-[experimental tiles](https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags-tile--overview).
-We encourage teams to start using these tiles, although current tiles are still
-supported.
-
@@ -37,7 +34,11 @@ supported.
Overview
Variants
Formatting
-Universal behaviors
+Content
+Base
+Clickable
+Selectable
+Expandable
AI presence
Related
References
@@ -110,33 +111,35 @@ supported.
## Overview
-Carbon ships a basic tile structure that responds to the grid. Tiles can contain
-type, images and/or blocks of color. However, Carbon tiles have no pre-set
-styles for the content inside. Tile usage guidance focuses solely on basic tile
-functions—not the information hierarchy within the tile or guidance around
-additional interactive elements that the tile may contain.
+Tile is a component that can contain various content and nested components and
+can have interactive functions. Tile is often laid out in groups, is a different
+color than the UI background, and responds to the grid. Tiles have no pre-set
+styles and are purposely flexible so product teams can determine their tile
+content for specific use cases.
-
+
+
+Example of the tile component in a UI
-#### Tiles versus Cards
+#### Tiles versus cards
Tiles are simple and foundational. Cards can be very complex. Cards are built
upon the tile foundation and have various patterns of information hierarchy,
multiple actions, overflow menus, selectable features, etc. Carbon does not have
-a Card pattern yet, but we link out to several card patterns within our pattern
+a card pattern, but we link out to several card patterns within our pattern
asset library (PAL) ecosystem below:
-- [Productive vs. Expressive cards](https://pages.github.ibm.com/cdai-design/pal/components/card/overview/)
- (Carbon for Cloud & Cognitive)
+- [Productive versus Expressive cards](https://pages.github.ibm.com/cdai-design/pal/components/card/overview/)
+ (Carbon for IBM Products)
- [Dashboard cards](https://pages.github.ibm.com/ai-applications/design/patterns/dashboards-v2/overview/#dashboard-cards)
- (AI Applications Design)
-- [Card](https://www.ibm.com/standards/carbon/components/cards) (Carbon for
+ (IBM Sustainability Software Design)
+- [Cards](https://www.ibm.com/standards/carbon/components/cards) (Carbon for
IBM.com)
### When to use
@@ -152,362 +155,625 @@ some common use cases for when to use tiles:
### When not to use
-Tiles reside in the same plane as the background layer—they do not have
-**elevation**. Tiles organize essential information and have the same visual
-hierarchy as content within the same page.
+Tiles reside on the same plane as the page background layer and do not have
+elevation. Tiles organize essential information and have the same visual
+hierarchy as content on the same page.
-Do not add a drop shadow to tiles and use them on the screen to reveal secondary
-information, actions, or notifications. Use [modals](/components/modal/usage),
-[popover](/components/popover/usage), and
-[dialogs](https://carbondesignsystem.com/patterns/dialog-pattern/) which have
-elevation and are appropriate for this function instead.
+Do not add a drop shadow to tiles and use them to reveal secondary information,
+actions, or notifications. Use [modals](/components/modal/usage),
+[popovers](/components/popover/usage), and
+[dialogs](https://carbondesignsystem.com/patterns/dialog-pattern/) that have
+elevation and are appropriate for this use case instead.
-## Variants
+### Variants
-
+Tiles can have different functions and are implemented in four ways: base,
+clickable, selectable, and expandable. These tile variants are flexible to
+support various use cases when building more complicated card features.
-The
-[experimental tiles](https://react.carbondesignsystem.com/?path=/docs/experimental-feature-flags-tile--overview)
-are applicable to clickable, selectable and expandable tiles — not to base
-tiles.
+| Variant | Purpose |
+| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Base](#base) | For high-level, short, and digestible content pieces such as features, plans, or services offered. |
+| [Clickable](#clickable) | For prompting an action, navigating or directing to other pieces of information about the subject matter. This variant has an available feature flag. |
+| [Selectable](#selectable) | For presenting options to a user in a structured manner, such as a set of pricing plans. This variant has available feature flags. |
+| [Expandable](#expandable) | For hiding and revealing a large amount of content to focus on specific pieces of information. This variant has an available feature flag. |
-
+### Feature flags
-Tiles can function or be implemented in four ways—base, clickable, selectable,
-or expandable. These variations of tiles are flexible enough to support a
-variety of different use cases when building more complicated card features.
+[Feature flags](/components/overview/feature-flags/) have been added to the
+clickable, selectable, and expandable variants of tile to improve accessibility
+and changes its visual appearance, not its functionality. For code-specific
+feature flag information, refer to the [Code](/components/tile/code/) tab. These
+current variants of tile are not being deprecated, but teams are encouraged to
+use the feature flag tile for their products moving forward.
-| Variant | Purpose |
-| ------------------------- | -------------------------------------------------------------------------------------------------------- |
-| [Base](#base) | For high-level, short, and digestible content pieces such as features, plans, or services offered |
-| [Clickable](#clickable) | For prompting an action, navigating or directing to other pieces of information about the subject matter |
-| [Selectable](#selectable) | For presenting options to a user in a structured manner, such as a set of pricing plans |
-| [Expandable](#expandable) | For hiding and revealing a large amount of content to focus on specific pieces of information |
+The following are the feature flag changes made to structured list.
-### Base
-
-Base tiles are used to display information to the user, such as features or
-services offered. Base tiles are often seen on marketing pages to promote
-content or on highly-interactive dashboards. These tiles can have internal
-calls-to-action (CTAs), such as a [button](/components/button/usage) or a
-[link](/components/link/usage).
+- A border has been added to the clickable, selectable, and expandable variants
+ of tile to visually indicate they are operable.
+- Single-select tile icons have been changed from checkmark icons to radio
+ button icons, where as multi-select tile icons have been changed from
+ checkmark icons to checkbox icons. These icons appear in the enabled state
+ instead of only on hover before making a selection.
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-### Clickable
+## Formatting
-Clickable tiles can be used as navigational elements that redirect the user to a
-new page. In these situations, the entire tile is in a clickable state. Due to
-accessibility concerns, clickable tiles cannot contain separate internal CTAs
-but can contain pictograms, icons, or media such as illustrations or images.
+### Sizing
+
+Tile width varies depending on the three basic gutter modes: **wide**,
+**narrow**, and **condensed**. Tile height varies depending on the content
+placed within it while using
+[spacing tokens](https://carbondesignsystem.com/elements/spacing/overview/) and
+following
+[aspect ratios](https://carbondesignsystem.com/elements/2x-grid/usage/#continuity).
+The minimum tile height is a 2:1 aspect ratio. As the content grows, set
+vertical spacing between sections within the content area.
+
+### Alignment
+
+#### Tile groups
+
+Tile groups are helpful when aligning tiles that have a strong relationship.
+Tile groups usually flow horizontally from left to right and have hierarchical
+importance, similar to navigation or catalog tiles.
-
+
-
+
+
+Example image of tiles on the wide grid
-### Selectable
+
+
+
+
-Selectable tiles work well for presenting options to a user in a structured
-manner, such as a set of pricing plans. Selectable tiles may contain internal
-CTAs (like links to docs) if the internal CTA is given its own click target.
+Example image of tiles on the narrow grid
-Selectable tiles can either have a single-select state working like a
-[radio button](/components/radio-button/usage), or multi-select state working as
-a [checkbox](/components/checkbox/usage).
+
+
-
+
+
+
+
+Example image of tiles on the condensed grid
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+#### Layout
+
+There are three basic layouts for tiles: **standard**, **vertical masonry**, and
+**horizontal masonry**. The standard layout is the the most commonly used.
+
+- In a standard layout, tiles are the same in height and width as all other
+ tiles in the group.
+- In a vertical masonry layout, tiles can vary in height, but are consistent in
+ width.
+- In a horizontal masonry layout, tiles can vary in width; different rows of
+ tiles may vary in height, but tiles within a row should be consistent in
+ height.
-Single-select tiles
+
+
-
+
-Multi-select tiles
+
+ Examples of standard, vertical masonry, and horizontal masonry tile layouts
+
-### Expandable
+## Content
-Expandable tiles are helpful for hiding and showing large amounts of content to
-a user. When expanded, tiles push content down the page. They allow the user to
-specifically focus on featured content while having access to the rest of the
-information. Expandable tiles can contain internal CTAs (like links to docs) if
-they are given their own click targets.
+### Main elements
+
+#### Tile text
+
+Tile text can vary based on the content. It can consist of heading text, body
+text, label text, and include interactive elements.
+
+### Futher guidance
+
+For further content guidance, see
+Carbon’s [content guidelines](https://carbondesignsystem.com/guidelines/content/overview/).
+
+## Base
+
+Base tiles are used to display information to the user, such as features or
+services offered. Base tiles are often seen on marketing pages to promote
+content or on highly interactive dashboards. These tiles can have internal
+calls-to-action (CTAs), such as a [buttons](/components/button/usage) or
+[links](/components/link/usage).
-
+
+
+Example of base tiles
+
+
+
-Expandable tile with interactive elements
+### Anatomy
-
+
+
-Expandable tile without interactive elements
+
+
+Anatomy of base tiles
-## Formatting
+1. **Container**: Contains all content in a tile.
+2. **Text**: The text in a tile.
+3. **Interactive elements (optional)**: Elements like links or buttons in a tile
+ that are interactive.
-### Anatomy
+### Alignment
+
+When placing interactive elements within base tiles, place links at the bottom
+left of the tile and span buttons in width at the bottom to indicate
+call-to-action items.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### States
+
+Base tiles only have an **enabled** state because they are not operable by a
+mouse or keyboard. For more information about base tile states, see the
+[Style](https://carbondesignsystem.com/components/tile/style) tab.
+
+### Interactions
+
+#### Mouse
+
+Base tiles are not operable by a mouse unless they contain interactive elements
+within them. Interactive elements can be clicked on and activated.
+
+#### Keyboard
+
+- Base tiles do not receive focus unless they contain interactive elements.
+- `Tab` moves focus forward through interactive elements within base tile in a
+ logical order.
+- `Shift` + `Tab` moves focus backward through interactive elements within base
+ tile in a logical order.
+- `Enter` activates the base tiles interactive elements.
+
+### Clickable areas
+
+Base tiles can have interactive elements within them, like links or buttons,
+which can be clicked on.
-
+
+
+Clickable areas of base tile with interactive elements
-1. **Image (optional)** : The image size follows standard Carbon aspect ratios
- (in this case, with a default size of 4:3)
+## Clickable
-2. **Container**: Contains the content area
+Clickable tiles can be used as navigational elements that redirect the user to a
+new page. In these situations, the entire tile is in a clickable state. Due to
+accessibility concerns, clickable tiles cannot contain separate internal CTAs
+but can contain pictograms, icons, or media such as illustrations or images.
-3. **Content area**: Contains the information and/or controls needed to complete
- the modal's task. It can include message text and components.
+Clickable tile has an available
+[feature flag](/components/overview/feature-flags/).
-### Sizing
+
+
+
-The **width** varies depending on three basic gutter modes: wide, narrow, and
-condensed. Tile **height** varies depending on the amount of content placed
-within it, but applies the
-[spacing](https://carbondesignsystem.com/guidelines/spacing/overview/) and
-follows Carbon's standard
-[aspect ratios](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#aspect-ratio).
-The minimum height starts with 2:1 aspect ratio. As the content grows, set
-vertical spacing between sections within the content area.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Anatomy
+
+
+
+
+
+
+Anatomy of clickable tile with the feature flag enabled
+
+
+
+
+1. **Container**: Contains all content within a tile.
+2. **Text**: The text within a tile.
+3. **Icon**: The icon that visually indicates the tile is navigational.
+4. **Border**: The border that visually indicates the tile is interactive.
### Alignment
-#### Icon and call-to-action button
+#### Icons
-On clickable tiles, use the arrow icon as default with the `$icon-interactive`
+On clickable tiles, use the arrow icon paired with the `$icon-interactive` color
token. Place the icon at the bottom right to indicate navigation. Avoid
-confusing the user with multiple click targets (like interactive links or
-buttons) on clickable tiles.
+confusing the user with multiple click targets, like interactive links or
+buttons, since the whole tile is already clickable.
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-On base tiles, place the interactive link at the bottom left or the button at
-the bottom to indicate call-to-action items.
+### States
-
-
+Clickable tiles have **enabled**, **hover**, **focus**, and **disabled** states.
+For more information about clickable tile states, see the
+[Style](https://carbondesignsystem.com/components/tile/style) tab.
-
+### Interactions
-
+#### Mouse
-
+The clickable tile is triggered by clicking anywhere within the tile container.
-
+#### Keyboard
-
-
+- `Tab` moves focus forward through clickable tiles in a logical order.
+- `Shift` + `Tab`moves focus backward through clickable tiles in a logical
+ order.
+- `Enter` activates the tile and navigates you to its destination.
-#### Tile groups
+### Clickable areas
-Tile groups are useful for aligning tiles that have a strong relationship. Tile
-groups flow horizontally from left to right usually and have similar
-hierarchical importance as with navigation or catalog tiles.
+Clickable tiles can be triggered by clicking anywhere on the tiles container.
-
+
-
+
-Example image of how tiles are built on the wide grid.
+
+ Clickable areas of clickable tile with the feature flag enabled
+
-
-
+## Selectable
-
+Selectable tiles are used to present different options for users to select from.
+Selectable tiles can contain internal CTAs, like links to documentation, if the
+CTA is given a click target of its own in addition to the tile's click target.
+Selectable tiles can either have single-selection or multi-selection.
-Example image of how tiles are built on the narrow grid.
+Selectable tile has available
+[feature flags](/components/overview/feature-flags/).
-
-
+### Single-select
+
+Use single-select tiles when the user can only select one tile from a tile
+group.
-
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-Example image of how tiles are built on the condensed grid.
+
-
+### Multi-select
-
+Use multi-select tiles when the user can select multiple tiles from a tile
+group.
-
+
+
+
-
+
-
+
-
+
-
-
+
-#### Layout
+
-There are three basic layouts for tiles: **standard**, **vertical masonry**, and
-**horizontal masonry**. The standard layout will be the most commonly used
-version.
+
-- Standard layout tiles are the same in height and width as all other tiles in
- the group.
-- In a vertical masonry layout, tiles can vary in height, but are consistent in
- width.
-- In a horizontal masonry layout, tiles can vary in width; different rows of
- tiles may vary in height, but tiles within a row should be consistent in
- height.
+
+
+
+
+
+### Anatomy
-
+
-
- Examples of tile layouts: standard, vertical masonry, and horizontal masonry.
-
+Anatomy of selectable tile with the feature flags enabled
-## Universal behaviors
-
-The behaviors listed in this section are universal across all tile variants. For
-behaviors that are unique to each variant, see each of the component variants
-sections below.
+1. **Container**: Contains all content within a tile.
+2. **Text**: The text within a tile.
+3. **Icon**: The radio or checkbox icon that visually indicates the tile is
+ selectable.
+4. **Border**: The border that visually indicates the tile is interactive.
### States
-For detailed visual information about the various states for this component, see
-the [Style](https://carbondesignsystem.com/components/tile/style) tab.
+Selectable tiles have **enabled**, **hover**, **hover selected**, **selected**,
+**focus**, and **disabled** states. For more information about base tile states,
+see the [Style](https://carbondesignsystem.com/components/tile/style/) tab.
+
+### Interactions
+
+#### Mouse
+
+The clickable tile is triggered by clicking anywhere within the tile container.
+
+#### Keyboard
+
+- `Tab` moves focus forward through selectable tiles in a logical order.
+- `Shift` + `Tab` moves focus backward through selectable tiles in a logical
+ order.
+- `Enter` selects the tile.
+
+### Clickable areas
-| State | When to use |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| _Enabled_ | When a tile is live but a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component |
-| _Hover_ | When a user is hovering over the tile with the mouse cursor to interact with it (except base tile) |
-| _Focus_ | When a user `tabs` to or clicks on the tile, it becomes focused, indicating the user has successfully navigated to the component (except base tile) |
-| _Selected_ | When a user `enters` or clicks on the single-select tile or the multi-select tile to select an option or multiple options |
-| _Disabled_ | When the user is not allowed to interact with clickable and selectable (single-select and multi-select) tiles due to either permissions, dependencies, or pre-requisites. The disabled state completely removes the interactive function from a component. The styling is not subject to WCAG contrast compliance. |
+Selectable tiles can be selected by clicking anywhere on the tiles container.
-
+
- Clickable tile's disabled state turns the default icon into the error icon.
+ Clickable areas of selectable tile with the feature flags enabled
-### Interactions
+### Expandable
-#### Mouse
+Expandable tiles are used to reveal or hide additional information to the user
+and can be expanded and collapsed differently depending on their content. If an
+expandable tile does not have interactive elements, clicking anywhere in the
+tile expands and collapses the tile. If an expandable tile has interactive
+elements, the chevron icon button expands and collapses the tile.
+
+Expandable tile has an available
+[feature flag](/components/overview/feature-flags/).
-Users can trigger an item by clicking anywhere in any tile container, except
-base tiles.
+### Without interactive elements
+
+Use the container expansion functionality to expand and collapse the tile when
+there are no interactive elements.
+
-
+
-
- Clickable, expandable, and selectable tiles are clickable anywhere within the
- tile.
-
+
+
+
+
+
+
+
+
+
+
+
+### With interactive elements
+
+Use the button expansion functionality to expand and collapse the tile when
+including interactive elements.
+
+
+
+
-
+
-Base tiles are static, except buttons or links.
+
+
+
+
+
+
+
+
+
-Expandable tiles can either be triggered as a whole or contain internal CTAs
-only if they are given their own click targets. In these cases, the tile’s click
-target is reduced to only the icon button.
+### Anatomy
-
+
+
+Anatomy of expandable tile with the feature flag enabled
+1. **Container**: Contains all content within a tile.
+2. **Text**: The text within a tile.
+3. **Interactive elements (optional)**: Interactive elements like links or
+ buttons placed within a tile.
+4. **Icon**: The icon that visually indicates the tile is expandable.
+5. **Border**: The border that visually indicates the tile is interactive.
+
+### States
+
+Expandable tiles have **enabled**, **hover**, **focus**, and **disabled**
+states. For more information about expandable tile states, see the
+[Style](https://carbondesignsystem.com/components/tile/style/) tab.
+
+### Interactions
+
+#### Mouse
+
+- Without interactive elements: The tile is expanded by clicking anywhere within
+ the tile container.
+- With interactive elements: The tile is expanded by clicking on the button in
+ the bottom right of the tile.
+
#### Keyboard
-Specific keyboard interactions will depend on the type of tile you are using and
-what content it contains but all types of tiles can take focus.
+- `Tab` moves focus forward through tiles. If there are interactive elements,
+ `Tab` moves focus forward in a logical order.
+- `Shift` + `Tab` moves focus backward through tiles. If there are interactive
+ elements, `Tab` moves focus forward in a logical order.
+- `Enter` expands and collapses the tile.
-| Key | Interaction |
-| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Tab | Move forward through tiles (if tiles themselves are clickable) and interactive elements within the tiles in a logical order |
-| Shift + Tab | Move backward through tiles (if tiles themselves are clickable) and interactive elements within the tiles in a logical order |
-| Return or Enter | Return or enter will open the tile (if the tile itself is clickable). If the tile is not clickable but has interactive elements, their corresponding actions are performed. |
-| Space | If the tile is selectable, the space bar will toggle tile selection. |
+### Clickable areas
+
+If the expandable tile does not have interactive elements, it can be expanded or
+collapsed by clicking anywhere on the tiles container. If the expandable tile
+has interactive elements, it can be expanded or collapsed by clicking on the
+button in the bottom right corner. Interactive elements within a tile can also
+be clicked on and have their own click targets.
+
+
+
+
+
+
+
+ Clickable areas of expandable tile with the feature flag enabled
+
+
+
+
## AI presence
@@ -522,7 +788,12 @@ For more information on designing for AI, see the
-
+
+
+
+ Base, clickable, and selectable tiles with AI presence and feature flags
+ enabled
+