Cards

Cards contain content and actions about a single subject.

Android check Web Flutter iOS

Interactive demo

This demo lets you preview the card component, its variations, and configuration options. Each tab displays a different type of card.


Usage

Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Principles

Contained

A card is identifiable as a single, contained unit.

Independent

A card can stand alone, without relying on surrounding elements for context.

Individual

A card cannot merge with another card, or divide into multiple cards.


Anatomy

The card container is the only required element in a card. All other elements shown here are optional.

Card layouts can vary to support the types of content they contain. The following elements are commonly found among that variety.

1. Container
Card containers hold all card elements, and their size is determined by the space those elements occupy. Card elevation is expressed by the container.

2. Thumbnail [optional]
Cards can include thumbnails to display an avatar, logo, or icon.

3. Header text [optional]
Header text can include things like the name of a photo album or article.

4. Subhead [optional]
Subhead text can include text elements such as an article byline or a tagged location.

5. Media [optional]
Cards can include a variety of media, including photos, and graphics, such as weather icons.

6. Supporting text [optional]
Supporting text include text like an article summary or a restaurant description.

7. Buttons [optional]
Cards can include buttons for actions.

8. Icons [optional]
Cards can include icons for actions.

Each card is made up of content blocks. All of the blocks, as a whole, are related to a single subject or destination. Content can receive different levels of emphasis, depending on its level of hierarchy.

Cards contain rich media, primary title, supporting text, and actions.

Containment

Implicit containment

An implicit container groups content or elements and may appear to have no edges, creating an implied boundary. Use implicit containment to group content and subtly reinforce the cohesion of a contained unit.

Cards without visible containers
Implicit containers create separation through proximity and open space

Explicit containment

An explicit container shows clear, visible boundaries. It can be tappable, and can be used to provide emphasis.

Cards with visible containers
Explicit containers create separation using visible boundaries


Dividers

Dividers can be used to separate regions in cards or to indicate areas of a card that can expand. A divider is a thin, lightweight...

Dividers can be used to separate regions in cards or to indicate areas of a card that can expand.

Use inset dividers (1), dividers that do not run the full length of a card, to separate related content.
Content that can be expanded should use full-width dividers.

Behavior

Transitions

Cards can transform to reveal additional content. Transition choreography is a coordinated sequence of motion that maintains user focus as the interface adapts. Related Link...

Cards use a container transform transition pattern to reveal additional content.

A card expands to fill the full screen using a parent-child transition.
DoExpand a card to reveal information.
Don'tCards don’t flip over to reveal information.

Elevation

On mobile, a card’s default elevation is 1dp, with a raised dragged elevation of 8dp. On desktop and mobile, cards can have a resting elevation...

On mobile, a card’s default elevation is most often 1dp, but can be 0dp in order to have fewer shadows on denser screens. In either case, the card's raised dragged elevation is 8dp.

A shadow helps indicate a card.

On desktop, cards have a default resting elevation of 0dp and elevate to 4dp on hover.

A stroke of 0dp helps indicate a card.

Gestures

Gestures should be implemented consistently within a card collection. Frequently used gestures on cards include swipe, pick up and move, and scrolling. A swipe gesture...

Gestures should be implemented consistently within a card collection. Frequently used gestures on cards include swipe, pick up and move, and scrolling.

Swipe

A swipe gesture can be performed on a single card at a time, anywhere on that card.

It can be used to:

  • Dismiss a card
  • Change the state of a card (such as flagging or archiving it)
DoA card should only have one swipe action assigned to it.
Don'tCards should not contain swipeable content (such as an image carousel or pagination). Swipe gestures should also not cause portions of cards to detach upon swipe.

Pick up and move

The pick up and move gesture allows users to move and re-order cards in a collection.

DoWhen moving a card, increase its elevation.
Don'tDon’t move cards behind other cards.
Don'tDon’t let cards bump other elements out of the way. When a card is picked up, it appears in front of all elements (except app bars and navigation).

Scrolling

Card content that is taller than the maximum card height is truncated and does not scroll, but can be displayed by expanding the height of a card. A card can expand beyond the maximum height of the screen, in which case the card scrolls within the screen.

DoOn mobile, cards can expand to reveal more content, scrolling within the screen. Content within cards doesn’t scroll.
Don'tOn mobile, cards cannot internally scroll, as it could cause two scroll bars to be displayed.
DoOn desktop, card content can expand and scroll within a card.

Scaling and adaptation

As cards scale to adapt to different screen sizes, their position and alignment can also change.

As cards scale to adapt to different screen sizes, their position and alignment can also change.

Cards and their elements can align left, right, or center as the layout scales. They can also have a fixed position, like FABs or navigation drawers.

Ergonomics

Adjust the layout of components to meet the ergonomic needs of large screen devices. For example, a horizontally oriented card on a mobile screen may become a larger, vertically-oriented card on larger screens, lending more space to imagery and typography to fit the larger form factor.

Example mobile UI showing list items that become cards on desktop.
Example of list items becoming full cards in the adaptation from mobile to tablet.

Adapting presentation

When a component switch isn’t needed, varying the presentation of the same content-focused component can also help serve a given context, such as making a card horizontally oriented on desktop screens. Use caution to avoid confusing user expectations for how the component behaves.

Visual presentation

To adjust the presentation of content-focused components, begin with spacing. Allow components like lists, cards, and images to optimize space while filling the region of a screen that suits a device breakpoint’s ergonomic needs.

Example card scaling while maintaining internal element relationships
Define fluid dimensions for cards, lists, and image lists.

The internal composition of a card can adjust for large screens.

Example of the same card with two different orientations and element positioning.

Column-based layouts

In mobile layouts, components such as lists or cards are stretched to fit the full width of the screen without compromising visual or ux qualities. When designing for large screens, use multiple columns to display content. Avoid extending UI elements across the screen whenever possible. Groups of related cards can be rearranged to become horizontal rows or carousels, allowing for better content organization on larger screens.

Sample UI with several cards lined up horizontally based on a column layout
Example of a group of related cards in a carousel.

Component swapping

Component swapping means that functionally equivalent components can be swapped to make larger-scale changes to the ergonomic and functional qualities of an interface.

Device breakpoints are the primary indicators for an interface to trigger a component swap that will better match the device or user context. Certain devices or user contexts require different components to meet platform expectations, device constraints, or ergonomic concerns. When swapping components, ensure that each component’s function is clear and aligns with user expectations for the given context.

As screen sizes increase, there are new opportunities for text and image compositions; in large screens you can use more space for images and text. Given the flexibility needed for these components to support multiple types of content, lists and cards can be swapped when scaling to larger screens, but use caution that list controls and other component-specific elements can be maintained.

Example of a mobile layout designed for scannability on a small screen.
Example of list of items expanding into a large image list. Large screen layouts accommodate more immersive imagery and expressive typography.

Actions

Primary action

The primary action area of a card is typically the card itself. Often cards are one large touch target to a detail screen on a...

The primary action area of a card is typically the card itself. Often cards are one large touch target to a detail screen on a subject.

The action area of a card contains rich media and supporting text.

Supplemental actions

Supplemental actions are represented by icons, text, and UI controls on cards. They are typically placed at the bottom of the card. For more than...

Supplemental actions are represented by icons, text, and UI controls on cards. They are typically placed at the bottom of the card.

For more than two supplemental actions, use an overflow menu instead.

Supplemental text and actions at the bottom of the card

Overflow menu

Overflow menus contain related actions. They are typically placed in the upper-right or lower-right corner of a card.

Overflow menus contain related actions. They are typically placed in the upper-right or lower-right corner of a card.

Overflow menus are usually located in the upper-right or lower-right corner of a card.

UI controls

UI controls can be included within a card to allow the user to interact with a card’s content. UI controls may be in the form...

UI controls can be included within a card to allow the user to interact with a card’s content. UI controls may be in the form of a slider, stars to rate content, chips, or buttons.

This card contains stars to rate content.
This card contains choice chips within the action area.
This card contains a slider control within the action area.

Additional actions

Cards can support multiple actions, such as UI controls and an overflow menu. Because cards are entry points to more detailed information, they should contain...

Cards can support multiple actions, such as UI controls and an overflow menu. Because cards are entry points to more detailed information, they should contain a limited number of actions.

CautionCards provide entry to more robust information. Be cautious not to overload cards with extraneous information or actions.

Focus

When traversing through focus points on a card, visit each focused element before moving to the next card. For users that navigate solely using focus...

When traversing through focus points on a card, visit each focused element before moving to the next card.

For users that navigate solely using focus traversal (using a D-pad and keyboard), cards should have either a primary action or open a new screen containing primary and supplemental actions.

Focus traversal of a card

Card collections

Usage

When multiple cards are present, they are grouped together into one or more collections. By default, cards in a collection are coplanar, sharing the same...

When multiple cards are present, they are grouped together into one or more collections. By default, cards in a collection are coplanar, sharing the same resting elevation unless they are picked up or dragged.


Layout

Organize card collections in a way that makes cards useful. How cards are laid out affects how they are perceived and used.

Organize card collections so that they are easy to use. Their layout affects how they are perceived.

When adding cards to a collection, the first item is automatically positioned on the top left. Subsequent cards are laid out left to right, top to bottom.

Scannable

To make a collection of cards scannable, place them in a consistent pattern.

Scannable cards

Dashboard

To display multiple subject matters and functions on a screen, use a dashboard-style card collection.

Dashboard-style card collection

Distinction

To highlight each card’s individuality, style, or novelty, use a card collection with an asymmetric grid.

Cards in an asymmetric grid

Contained collections

Card collections can be placed within a container, and be scrolled within it.

Card collections can be placed within a container, and be scrolled within it.

DoA card collection can horizontally scroll within a container.
Don'tThe container for a collection should not be a card, and the entire surface area of the container should not be interactive.

Filtering and sorting

Card collections can be filtered in a variety of ways, including by date or alphabetical order. If a collection can be filtered, the filter must...

Card collections can be filtered in a variety of ways, including by date or alphabetical order. If a collection can be filtered, the filter must apply to each card in the collection.

Filter or sorting options should be placed outside of the card collection.

Theming

Owl Material theme

This educational app’s cards have been customized using Material Theming. Areas of customization include color, typography, and shape. Owl is an educational app that provides...

Color

Owl’s cards use custom color on three elements: the container, text, and icon.

Element Category Attribute Value
Container Background Color
Opacity
#0336FF
100%
Text, Icons On Background Color
Opacity
#FFFFFF
100%

Typography

Owl’s cards use custom typography for the card title, number, and category text.

Element Category Attribute Value
Title Subtitle 1 Typeface
Font
Size
Case
Rubik
Medium
16
Title case
Number Subtitle 2 Typeface
Font
Size
Case
Rubik
Medium
14
Title case
Category Overline Typeface
Font
Size
Case
Rubik
Regular
10
All caps

Shape

Owl’s cards use a custom container shape, with a 0dp corner radius.

Element Category Attribute Value
Container Medium component Family
Size
Rounded
0dp; 0dp; 0dp; 0dp

Reply Material theme

This email app’s cards have been customized using Material Theming. Areas of customization include color, typography, and shape. Reply is an email app that uses...

Color

Reply’s cards use custom color on six elements: the container, metadata text, title text, body text, icon, and icon fill.

Element Category Attribute Value
Container Surface Color
Opacity
#FFFFFF
100%
Metadata text On Secondary Color
Opacity
#232F34
100%
Title text On Secondary Color
Opacity
#232F34
100%
Body text On Secondary Color
Opacity
#232F34
100%
Icon On Secondary Color
Opacity
#232F34
100%
Icon fill On Secondary Color
Opacity
#232F34
30%

Typography

Reply’s cards use custom typography for the card title, body, and metadata text.

Element Category Attribute Value
Title H6 Typeface
Font
Size
Case
Work Sans
Bold
21
Sentence case
Body Body 1 Typeface
Font
Size
Case
Work Sans
Regular
17
Sentence case
Metadata Body 2 Typeface
Font
Size
Case
Work Sans
Regular
15
Sentence case

Shape

Reply’s cards use a custom container shape, with a 0dp corner radius.

Element Category Attribute Value
Container Medium component Family
Size
Rounded
0dp; 0dp; 0dp; 0dp;

Specs

This section should not be read as prescriptive or exhaustive. Cards have no singular layout, typographic, or image size. All cards should be designed to meet the needs of the content they present. This section shows a variety of card layouts to help showcase that variety.

Elevated cards

  • Measurement 148
  • Measurement 344
  • Measurement 16
  • Measurement 8
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 28
  • Measurement 8
  • Measurement 40
  • 8080
 
  • Measurement 382
  • Measurement 344
  • Measurement 16
  • Measurement 72
  • Measurement 72
  • Measurement 116
  • Measurement 34
  • Measurement 22
  • Measurement 28
  • Measurement 8
  • Measurement 8
  • Measurement 24
  • 344194
  • 4040
 
  • Measurement 510
  • Measurement 194
  • Measurement 0
  • Measurement 344
  • Measurement 32
  • Measurement 26
  • Measurement 36
  • Measurement 1
  • Measurement 24
  • Measurement 14
  • Measurement 20
  • Measurement 16
  • Measurement 24
  • Measurement 32
  • Measurement 8
  • Measurement 8
  • Measurement 44
  • Measurement 24
 

Outlined cards

  • Measurement 40
  • Measurement 24
  • Measurement 24
  • Measurement 16
  • Measurement 16
  • Measurement 16
  • Measurement 8
  • Measurement 8
  • Measurement 16
  • Measurement 1
  • 8080
 

Using cards

Before you can use a Material card, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Cards support checking and dragging, but those behaviors are not implemented by default.

Making cards accessible

The contents within a card should follow their own accessibility guidelines, such as images having content descriptions set on them.

If you have a draggable card, you should set an AccessibilityDelegate on it, so that the behavior can be accessible via screen readers such as TalkBack. See the draggable card section section below for more info.

Making a card checkable

Elevated card with a checked button and a light purple overlay; secondary
title and Action 1 and Action 2 buttons

When a card is checked, it will show a checked icon and change its foreground color. There is no default behavior for enabling/disabling the checked state. An example of how to do it in response to a long click is shown below.

In the layout:

In code:

Making a card draggable

Elevated card with a light grey overlay; secondary title and Action 1 and
Action 2 buttons

Cards have an app:state_dragged that has foreground and elevation changes to convey motion. We recommend using ViewDragHelper to set the dragged state:

Alternatively, the Material Catalog has an implementation example that uses a custom class called DraggableCoordinatorLayout that you can copy, which is used as the parent container in the layout:

In the layout:

In code:

Finally, make sure to make the behavior is accessible by setting an AccessibilityDelegate on the card. The following shows an example of allowing the user to move the card to two different positions on the screen.

Note: Cards also support a swipe-to-dismiss behavior through the use of 'SwipeDismissBehavior'. You can see an example here.

Card

On mobile, a card’s default elevation is 1dp, with a raised dragged elevation of 8dp.

Elevated card with a secondary title and Action 1 and Action 2 buttons in
purple

Card examples

API and source code:

Note: You don't need to specify a style tag as long as you are using a Material Components Theme. If not, set the style to Widget.MaterialComponents.CardView.

Elevated card

The following example shows an elevated card.

"Elevated card with photo, a title, a secondary title, text, and Action 1 and
Action 2 buttons in purple"

Outlined card

The following example shows an outlined card.

"Outlined card with a photo, title, a secondary title, text, and Action 1 and
Action 2 buttons in purple"

In the layout:

In the stroke color (stroke_color.xml):

Anatomy and key properties

A card has a container and an optional thumbnail, header text, secondary text, media, supporting text, buttons and icons.

card anatomy diagram

  1. Container
  2. Thumbnail
  3. Header text
  4. Secondary text
  5. Media
  6. Supporting text
  7. Buttons
  8. Icons
  9. Checked icon (not shown)

Note: All the optional elements of a card's content (with the exception of the checked icon) are implemented through the use of other views/components, as shown in the card examples section.

Container attributes

ElementAttributeRelated method(s)Default value
Colorapp:cardBackgroundColorsetCardBackgroundColor
getCardBackgroundColor
?attr/colorSurface
Foreground colorapp:cardForegroundColorsetCardForegroundColor
getCardForegroundColor
@android:color/transparent (see all states)
Stroke colorapp:strokeColorsetStrokeColor
getStrokeColor
getStrokeColorStateList
null
Stroke widthapp:strokeWidthsetStrokeWidth
getStrokeWidth
0dp
Shapeapp:shapeAppearancesetShapeAppearanceModel
getShapeAppearanceModel
?attr/shapeAppearanceMediumComponent
Elevationapp:cardElevationsetCardElevation
setCardMaxElevation
1dp
Ripple colorapp:rippleColorsetRippleColor
setRippleColorResource
getRippleColor
?attr/colorOnSurface at 20% opacity (see all states)

Note: We recommend that cards on mobile have 8dp margins. android:layout_margin will NOT work in default styles (eg. materialCardViewStyle) so either set this attr directly on a MaterialCardView in the layout or add it to a style that is applied in the layout with style="@style/....

Note: Without an app:strokeColor, the card will not render a stroked border, regardless of the app:strokeWidth value.

Checked icon attributes

ElementAttributeRelated method(s)Default value
IconcheckedIconsetCheckedIcon
setCheckedIconResource
getCheckedIcon
@drawable/ic_mtrl_checked_circle.xml
ColorcheckedIconTintsetCheckedIconTint
getCheckedIconTint
?attr/colorPrimary
Checkableandroid:checkablesetCheckable
isCheckable
false
SizecheckedIconSizesetCheckedIconSize
setCheckedIconSizeResource
getCheckedIconSize
24dp
MargincheckedIconMarginsetCheckedIconMargin
setCheckedIconMarginResource
getCheckedIconMargin
8dp

States

Cards can have the following states:

StateDescriptionRelated method(s)
DefaultCard is not checked and not draggedN/A
Checked (android:state_checked)true if a card is checkedsetChecked
setOnCheckedChangeListener
isChecked
Dragged (app:state_dragged)true when a card is being draggedsetDragged
isDragged

Styles

ElementStyle
Default styleWidget.MaterialComponents.CardView

Default style theme attribute: ?attr/materialCardViewStyle

See the full list of styles and attributes.

Theming cards

A card supports Material Theming and can be customized in terms of color, typography and shape.

Card theming example

API and source code

The following example shows a card with Material Theming.

Card with Shrine theme with photo, title, secondary title, text and Action 1
and 2 buttons in black

Implementing card theming

Using theme attributes and a style in res/values/styles.xml (themes all cards and affects other components):

or using a default style theme attribute, styles and a theme overlay (themes all cards but does not affect other components):

or using the style in the layout (affects only this specific card):

In order to optimize shape theming, some (optional) adjustments need to be made to the card layout to incorporate ShapeableImageView.

In the layout:

In res/values/styles.xml:

Note: In order to theme card contents (text, buttons, etc.), the relevant styles/attributes for these components will need to be included. For more information, see the article on buttons.

No Android implementation guidance available

Using cards

Installation

Styles

In order to remain general-purpose and support e.g. images spanning the full width of the card, MDC Card does not include padding styles on the root element. When adding free-form text content to cards, padding should be set to 16px:

Note: MDC Card's predefined classes for content areas (e.g. mdc-card__actions) take care of their own padding.

By default, cards expand horizontally to fill all available space, and vertically to fit their contents. If you'd like to maintain a consistent width and height across cards, you'll need to set it in your styles:

You can also place cards within layout containers, such as MDC Layout Grid or CSS Flexbox or Grid.

JavaScript

MDC Card itself does not require JavaScript. However, if you place interactive components inside your cards, you may want to instantiate ripples or other components. For example:

Note: If your card includes any icon button toggles, you will want to instantiate MDCIconButtonToggle instead of MDCRipple.

Card

Card example

Note: MDC Card is designed to accommodate a wide variety of use cases. See the Card Contents section for information on helpers for specific types of content within cards.

Other variants

Outlined card

Outlined card with a secondary title and two actions: Action 1 and Action 2 in purple

By default, cards are elevated with no outline. You can render unelevated, outlined cards instead by adding the mdc-card--outlined modifier class.

Card contents

MDC Card can be used for a wide variety of use cases, but it includes styles for a few common ones.

Primary action

If a majority of the card (or even the entire card) should be actionable, you can add the mdc-card__primary-action class to the region to give it MDC Ripple styles. You should also assign tabindex="0" to ensure it can also be interacted with via keyboard.

Note: We recommend avoiding adding other actionable items within mdc-card__primary-action, due to the overlapping effect of multiple nested elements with ripple and states applied at once.

Rich media

This area is used for showing rich media in cards, and optionally as a container. Use the mdc-card__media CSS class and the optional modifier classes.

Actions

This area is used to show different actions the user can take, typically at the bottom of a card. It's often used with buttons:

It can also be used with icon buttons:

Be sure to include the mdc-card__action class on every action for correct positioning. In addition, button icons should use the mdc-card__action--button class, and icon actions should use the mdc-card__action--icon class.

To have a single action button take up the entire width of the action row, use the --full-bleed modifier on the row:

To display buttons and icons in the same row, wrap them in mdc-card__action-buttons and mdc-card__action-icons elements:

Icons

We recommend using Material Icons from Google Fonts:

However, you can also use SVG, Font Awesome, or any other icon library you wish.

Combined example

The following is an example incorporating all of the above elements:

Non-semantic content

It can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.

In this case, it's important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an mdc-card__content element. The non-semantic content can remain at the card's top level:

API

CSS classes

CSS ClassDescription
mdc-cardMandatory. The main card element.
mdc-card--outlinedOptional. Removes the shadow and displays a hairline outline instead.
mdc-card__primary-actionOptional. The main tappable area of the card. Typically contains most (or all) card content exceptmdc-card__actions. Only applicable to cards that have a primary action that the main surface should trigger.
mdc-card__rippleOptional. The element that shows the ripple styling. This is mandatory if mdc-card__primary-action is used. Only applicable to cards that have a primary action that the main surface should trigger.
mdc-card__mediaOptional. Media area that displays a custom background-image with background-size: cover.
mdc-card__media--squareOptional. Automatically scales the media area's height to equal its width.
mdc-card__media--16-9Optional. Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio.
mdc-card__media-contentOptional. An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image.
mdc-card__actionsOptional. Row containing action buttons and/or icons.
mdc-card__actions--full-bleedOptional. Removes the action area's padding and causes its only child (an mdc-card__action element) to consume 100% of the action area's width.
mdc-card__action-buttonsOptional. A group of action buttons, displayed on the left side of the card (in LTR), adjacent to mdc-card__action-icons.
mdc-card__action-iconsOptional. A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to __action-buttons.
mdc-card__actionOptional. An individual action button or icon.
mdc-card__action--buttonOptional. An action button with text.
mdc-card__action--iconOptional. An action icon with no text. We recommend using Material Icons from Google Fonts.
mdc-card__contentOptional. Used to delineate the card's semantic contents from any non-semantic elements (e.g., those used to implement an overlay).

Sass mixins

MixinDescription
fill-color($color)Sets the fill color of a card.
outline($color, $thickness)Sets the color and thickness of a card's outline (but does not remove its shadow).
shape-radius($radius, $rtl-reflexive)Sets the rounded shape to card with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
media-aspect-ratio($x, $y)Maintains the given aspect ratio on a mdc-card__media subelement by dynamically scaling its height relative to its width.
No Web implementation guidance available

Using cards

Making cards accessible

Flutter's card component APIs support labeling for accessibility. For more guidance on writing labels, go to our page on how to write a good accessibility label.

Card

On mobile, a card’s default elevation is 1dp, with a raised dragged elevation of 8dp.

Card example

Source code API:

Card

The following example shows an elevated card. The card has a title, a secondary title, text, and two actions: Action 1 and Action 2 in purple (#6200EE).

Elevated card example for Flutter showing...

The example code below generates the card:

Anatomy and key properties

Card anatomy diagram

Elevated card attributes

  1. Container
  2. Thumbnail (optional)
  3. Header text (optional)
  4. Subhead (optional)
  5. Media (optional)
  6. Supporting text (optional)
  7. Buttons (optional)
  8. Icons (optional)

Container

 Property
Container widthWrap Card widget with Container widget and use width property
Container heightWrap Card widget with Container widget and use height property
Container margin (left)Wrap Card widget with Container widget and use margin property with EdgeInsets.only(left: 10)
Container margin (right)Wrap Card widget with Container widget and use margin property with EdgeInsets.only(right: 10)
Container margin (top)Wrap Card widget with Container widget and use margin property with EdgeInsets.only(top: 10)
Container elevationelevation

Thumbnail (optional)

 Property
Desc. 1Not by default but can be made by using ListTile() and use property leading

Header text (optional)

 Property
Text labelNot by default but can be made by using ListTile() and use property title
Text colorWithin title property you can customize the Text color by using the style property. The style property uses a TextStyle property and within that class use the color property
TypographyWithin title property you can customize the typography by using the style property. The style property uses a TextStyle property and within that class use the fontFamily property

Subhead (optional)

 Property
Text labelNot by default but can be made by using ListTile() and use property subtitle
Text colorWithin subtitle property you can customize the Text color by using the style property. The style property uses a TextStyle property and within that class use the color property
TypographyWithin subtitle property you can customize the typography by using the style property. The style property uses a TextStyle property and within that class use the fontFamily property

Media (optional)

 Property
Desc. 1Can be made using Image.asset() within Card

Supporting text (optional)

 Property
Text labelCan be made using text property
Text colorWithin text property you can customize the Text color by using the style property. The style property uses a TextStyle property and within that class use the color property
TypographyWithin text property you can customize the typography by using the style property. The style property uses a TextStyle property and within that class use the fontFamily property

Button (optional)

Material button API:

 Property
Desc. 1Can be made using ButtonBar, within ButtonBar use FlatButtons

Icon (optional)

 Property
Desc. 1Can be made using ButtonBar, within ButtonBar use IconButton or Icon

Theming a card

A card supports Material Theming and can be customized in terms of color, typography and shape.

Card theming example

Source code API:

"Shrine Card with 'action 1', 'action 2', and an image of orange flowers"

To test code copy and paste code into dartpad.dev.

No Flutter implementation guidance available

Using cards

Installing

In order to use Material cards, first add the Cards subspec to your Podfile:

Then, run the installer:

After that, import the relevant target or file.

Swift

Objective-C

Cards Classes

On iOS, the Cards component offers two implementations to choose from, MDCCard and MDCCardCollectionCell.

MDCCard

MDCCard subclasses UIControl. Subclassing MDCCard allows you to create cards that match the Material spec.

MDCCard uses UIControlState to represent state. Its styling changes depending on whether its state is .normal or .highlighted.

MDCCard allows the following properties to be customized:

  • The border width for a specific state
  • The border color for a specific state
  • The shadow elevation for a specific state
  • The shadow color for a specific state
  • The corner radius for the card

MDCCardCollectionCell

MDCCardCollectionCell subclasses UICollectionViewCell. Subclassing MDCCardCollectionCell allows you to have Material cards as cells in your UICollectionView.

MDCCardCollectionCell has its own notion of state, MDCCardCellState, which is tied to the UICollectionViewCellhighlighted and selected properties.

In addition to those offered by MDCCard, MDCCardCollectionCell offers the following customization options:

  • Changing the image that appears in the Selected state.
  • Changing the image tint color that appears in the Selected state.

Making cards accessible

Accessibility best practices depend on whether you are using an MDCCard or an MDCCardCollectionCell.

MDCCardaccessibility

The nested elements in an MDCCard are available to assistive technologies without additional customization. However, additional setup may be needed to accommodate the following scenarios:

Cards with Images

Images may have additional context beyond text that is already presented on the card. For example, news article images can benefit from an accessibilityLabel describing their content.

Swift

Objective-C

Cards with "star ratings"

Star or rating images should have accessibilityLabel property values describing their purpose and accessibilityValue property values describing their rating value.

Swift

Objective-C

Cards whose contents should be read in a specific order

Primary content or actions that appear lower on the screen will be read last by assistive technologies, sometimes after longer or non-primary content. To change the order, or group elements together, you can make the card an accessibility container by adopting the UIAccessibilityContainer protocol. Grouping and order is controlled by creating as many UIAccessibilityElement elements as needed, and returning them in the desired order.

MDCCardCollectionCell accessibility

Since assistive technologies visit all cards in a collection in a sequential order, it is often easier to distinguish between elements that belong to different cards by aggregating all the card's information so the card is read as a single sentence. This can be done by setting an appropriate accessibilityLabel for the card. Additionally, set the card's isAccessibilityElement to true. Cards are a container element and setting isAccessibiltyElement for a container turns off individually selecting its subelements.

Swift

Objective-C

Card

Card with sample image and buttons

While iOS has two different implementations for Cards, there is really only one type of card from the design perspective. The example above could be built using either an MDCCard or an MDCCardCollectionCell. Here is an example class that does it with MDCCard.

MDCCard example

MDCCard GitHub source.

MDCCard can be used like a regular UIView. This is an example of a regular card:

single basic card

Swift

Objective-C

MDCCardCollectionCell example

MDCCardCollectionCell GitHub source

MDCCardCollectionCell can be used like a regular UICollectionViewCell. This is an example of MDCCardCollectionCells in a collection:

card collection cells

Swift

Objective-C

Anatomy and key properties

A card has a container and an optional thumbnail, header text, secondary text, media, supporting text, buttons and icons.

card anatomy diagram

  1. Container
  2. Thumbnail
  3. Header text
  4. Secondary text
  5. Media
  6. Supporting text
  7. Buttons
  8. Icons
  9. Checked icon (not shown)

Note: All the optional elements of a card's content are implemented through the use of other views/components.

MDCCard attributes

 AttributeRelated method(s)Default value
ColorbackgroundColor-setBackgroundColor:
backgroundColor:
Surface color
Foreground colorN/AN/AN/A
Stroke colorlayer.borderColor-setBorderColor:forState:
-borderColorForState:
On surface color at 37% opacity
Stroke widthlayer.borderWidth-setBorderWidth:forState:
-borderWidthForState:
1
ShapeshapeGenerator-setShapeGenerator:
-shapeGenerator
MDCRectangleShapeGenerator
ElevationN/A-setShadowElevation:forState:
-shadowElevationForState:
1
Ripple colorrippleView.rippleColorN/Anil

MDCCardCollectionCell attributes

 AttributeRelated method(s)Default value
ColorbackgroundColor-setBackgroundColor:
backgroundColor:
Surface color
Foreground colorN/AN/AN/A
Stroke colorlayer.borderColor-setBorderColor:forState:
-borderColorForState:
On surface color at 37% opacity
Stroke widthlayer.borderWidth-setBorderWidth:forState:
-borderWidthForState:
1
ShapeshapeGenerator-setShapeGenerator:
-shapeGenerator
MDCRectangleShapeGenerator
ElevationN/A-setShadowElevation:forState:
-shadowElevationForState:
1
Ripple colorrippleView.rippleColorN/Anil

Theming

Cards supports Material Theming using a Container Scheme. MDCCard and MDCCardCollectionCell have both default and outlined theming methods. Learn more about theming extensions here. Below is a screenshot of an MDCCard with the Material Design Shrine theme:

Shrine card

To make use of Cards theming install the Cards theming extensions with Cocoapods. First, add the following line to your Podfile:

Then run the installer:

Next, import the Cards theming target, and call the correct theming method.

Swift

Objective-C

No iOS implementation guidance available

Up next