{`
{`
-## Variants
+## Tile variants
+
+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 complicating card features.
-All of the images below represent examples of types of content that could be
-presented within a tile. The styling in these examples is for illustration only;
-you are free to create your own layout and design within a tile.
+| 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 in order to focus on specific pieces of info |
-### Read-only
+### Base
-Read-only tiles are used to display information to the user, such as features or
-services offered. Read-only tiles are often seen on marketing pages to promote
-content. These tiles can have internal calls-to-action (CTAs), such as a
-[button](/components/button/usage) or a [link](/components/link/usage).
+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 dashboards that are highly interactive. These tiles can have
+internal calls-to-action (CTAs), such as a [button](/components/button/usage) or
+a [link](/components/link/usage).
-
+
-
+
@@ -247,48 +278,365 @@ content. These tiles can have internal calls-to-action (CTAs), such as a
Clickable tiles can be used as navigational items, where the entire tile is a
clickable state, which redirects the user to a new page. Clickable tiles cannot
-contain separate internal CTAs.
+contain separate internal CTAs but can contain pictograms, icons, or media such
+as illustrations or images.
-
+
-
+
### Selectable
-Selectable tiles work like a [radio button](/components/radio-button/usage),
-where the entire tile is a click target. Selectable tiles may contain internal
-CTAs (like links to docs) if the internal CTA is given its own click target.
Selectable tiles work well for presenting options to a user in a structured
-manner, such as a set of pricing plans.
+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.
+
+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).
-
+
+
+Single select tiles work like radio-buttons
+
+
+
+Multi-select tiles work like checkboxes
### Expandable
-Expandable tiles are helpful for hiding/showing larger amounts of content to a
-user. They can only be stacked in a single column, and cannot live in a row or
-horizontal grid. When expanded, tiles push content down the page. Expandable
-tiles may contain internal CTAs (like links to docs) if the internal CTA is
-given its own click target.
+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 and the click target is reduced to only
+the chevron icon.
-
+
+
+
+
+
+## Formatting
+
+### Anatomy
+
+
+
+
+
+
+
+
+
+1. **Container**: Includes a title, optional label, and the close icon.
+
+2. **Content area**: Contains the information and/or controls needed to complete
+ the modal's task. It can include message text and components.
+
+### Sizing
+
+The **width** varies depending on three basic grid modes: wide, narrow, and
+condensed. The **height** varies depending on the amount of content placed
+within it, but still follows the aspect ratio.
+
+[Aspect ratios](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#aspect-ratio)
+are written out as a formula of width to height, such as 3:2. It’s important to
+remember that while two images can have the same aspect ratio, they can have
+varying images sizes.
+
+
+
+
+
+
+Tiles get wider as the browser gets larger
+
+
+
+
+### Alignment
+
+Always strive for left alignment whenver possible. Type in tiles should always
+be left aligned. Icons or icon buttons can be aligned to either left or right
+edge depending on the tiles’ complexity.
+
+For example: In situations where there are both an icon or pictogram with an
+icon button, place the icon or pictorgram in the lower left corner of the tile
+and move the icon button (action) to the right corner.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Placement
+
+#### Tile groups
+
+Tile groups are a useful way of aligning tiles that have a strong relationship.
+Tile groups flow horizontally left to right usually and have similar
+hierarchical importance like navigation or catalog tiles.
+
+
+
+
+
+
+Example image of how tiles are built on the wide grid.
+
+
+
+
+
+Example image of how tiles are built on the narrow grid.
+
+
+
+
+
+
+
+
+
+Example image of how tiles are built on the condensed grid.
+
+
+
+
+#### Layout
+
+There are three basic layouts for tiles: **standard**, **vertical masonry**, and
+**horizontal masonry**. The standard layout will be the most commonly used
+version.
+
+- Displaying high-level information and metrics on dashboards.
+- A vertical masonry grid can vary in height, but is consistent in width.
+- A horizontal masonry grid can vary in width. Rows of tiles may vary in height,
+ but the tiles within a row should be consistent in height.
+
+
+
+
+
+
+Standard layout for tiles
+
+
+
+
+
+
+
+An example of the standard layout
+
+
+
+
+
+
+
+
+
+Vertical masonry layout for tiles
+
+
+
+
+
+
+
+An example of the vertical masonry layout
+
+
+
+
+
+
+
+
+
+Horizonal masonry layout for tiles
+
+
+
+
+
+
+
+An example of the horizonal masonry layout
+
+
+
+
+### Elevation
+
+Tiles reside in the same plane as the background layer—they do not have
+elevation. Do not add drop shadows to tiles. Tiles organize essential
+information and have the same visual hierarchy as content within the same page.
+Modals, popovers, and dialogs do have elevation but are not inherently part of
+the user's main workstream and are invoked on screen to reveal secondary
+information, actions, or notifications.
+
+### Call-to-actions
+
+For **base, selectable, and expandable tiles**, use `$link-01` when icon and
+link are paired together or use `$interactive-04` when the icon stands alone.
+
+For **clickable tiles**, don’t highlight text or icons to avoid them being
+confused as links or clickable.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Behaviors
+
+### Interactions
+
+#### Mouse
+
+Users can trigger an item by clicking anywhere in any tile container, except
+base tiles.
+
+
+
+
+
+
+
+ Clickable, expandable, and selectable tiles are clickable anywhere within the
+ tile.
+
+
+
+
+
+
+
+
+
+
+Base tiles are static, except buttons or links .
+
+
+
+
+Expandable tiles can either be triggered as a whole or only contain internal
+CTA's if they are given their own click targets and the tile’s click target is
+reduced to only the chevron icon.
+
+
+
+**Note:** Clickable targets are currently not available in coding. Teams can
+override the code to make smaller click targets while we're updating this in the
+future.
+
+
+
+
+
+
+
+
+
+
+
+#### 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.
+
+| Key | Interaction |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Tab | Move forward through tiles (if tiles themselves are clickable) and interactive elements within the tiles in a logical order |
+| Shit + 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 |
+
+## Related
+
+#### Grid
+
+To learn more about how to build tiles correctly on the grid, see Carbon’s
+[2x grid](/guidelines/2x-grid/implementation).
+
+#### Aspect ratio
+
+Aspect ratio is important when building tiles and images. For further guidance,
+see Carbon’s
+[Aspect ratio](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#aspect-ratio)
+and its
+[implementation](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#screen-regions).
+
+#### Buttons
+
+When in doubt, use full-span button alignment within tiles. For further
+guidance, see Carbon’s [buttons](/components/buttons/usage).
+
+#### Link
+
+Link has variants depending on the context. For further guidance, see Carbon’s
+[link](/components/buttons/usage).
+
+## References
+
+Hagan Rivers,
+[Interactions design with cards/tiles](https://medium.com/@hagan.rivers/interaction-design-with-cards-tiles-5a6895aa220d/)
+(Medium, 2017)
+
## Feedback
Help us improve this component by providing feedback, asking questions, and