Cards contain content and actions about a single subject.

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Card
  • Outlined card
• Card Blocks
  • Generic Block
  • Media Block
  • Primary Action Block
• Card Actions
  • Full Bleed Actions
• Focus a Card

Resources

• Demo: Cards
• Material Design Guidelines: Cards
• MDC Web: Card
• Sass Mixins (MDC Web)

Basic Usage

import Html exposing (Html, text)
import Material.Button as Button
import Material.Card as Card
import Material.IconButton as IconButton


main =
    Card.card Card.config
        { blocks =
            [ Card.block <|
                Html.div []
                    [ Html.h2 [] [ text "Title" ]
                    , Html.h3 [] [ text "Subtitle" ]
                    ]
            , Card.block <|
                Html.div []
                    [ Html.p [] [ text "Lorem ipsum…" ] ]
            ]
        , actions =
            Just <|
                Card.actions
                    { buttons =
                        [ Card.button Button.config "Visit" ]
                    , icons =
                        [ Card.icon IconButton.config
                            (IconButton.icon "favorite")
                        ]
                    }
        }

Configuration

Configuration Options

Card

Outlined Card

A card may display a border by setting its setOutlined configuration option to True.

Card.card
    (Card.config |> Card.setOutlined True)
    { blocks =
        [ Card.block <|
            Html.div [] [ Html.h1 [] [ text "Card" ] ]
        ]
    , actions = Nothing
    }

Card Blocks

A card's primary content is comprised of blocks. Blocks may be comprised of arbitrary HTML or a media element. Optionally, a group of card blocks can be marked as the card's primary action which makes that group of blocks interactable.

Generic Block

Generic card blocks are the most common and allow you to specify card content using arbitrary HTML. Note that you will have to carefully adjust styling such as padding and typography yourself.

Card.block <|
    Html.div []
        [ Html.h2 [] [ text "Title" ]
        , Html.h3 [] [ text "Subtitle" ]
        ]

Media Block

Cards may contain a media block usually as the first content block. The media will be displayed using a background image, and you may chose from square or a 16 to 9 aspect ratio.

Primary Action Block

A group of card blocks can be marked as the primary action of the card. A primary action block may be clicked upon and displays a visual interaction effect.

Card.primaryAction
    [ Html.Events.onClick CardClicked ]
    [ Card.block <|
        Html.h2 [] [ text "Title" ]
    , Card.block <|
        Html.p [] [ text "Lorem ipsum…" ]
    ]

Card Actions

Card actions are comprised of buttons and icons. These are exposed as variants to the standard buttons and icons, but they do share the same configuration.

Card.actions
    { buttons =
        [ Card.button Button.config "View" ]
    , icons =
        [ Card.icon IconButton.config
            (IconButton.icon "favorite")
        ]
    }

Card Full Bleed Actions

While a card's action buttons are usually left-aligned, a special case exists when there is only a single button as card action.

Focus a Card

You may programatically focus a card by assigning an id attribute to it and use Browser.Dom.focus.

Note that cards must have a primary action element to be focusable.

Card.card
    (Card.config
        |> Card.setAttributes
            [ Html.Attributes.id "my-card" ]
    )
    { blocks = Card.primaryAction [] []
    , actions = Nothing
    }