Cards contain content and actions about a single subject.

Table of Contents

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

Resources

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

Basic Usage

import Html exposing (Html, text)
import Material.Button exposing (buttonConfig)
import Material.Card
    exposing
        ( card
        , cardActionButton
        , cardActionIcon
        , cardActions
        , cardBlock
        , cardConfig
        )
import Material.IconButton exposing (iconButtonConfig)


main =
    card cardConfig
        { blocks =
            [ cardBlock <|
                Html.div []
                    [ Html.h2 [] [ text "Title" ]
                    , Html.h3 [] [ text "Subtitle" ]
                    ]
            , cardBlock <|
                Html.div []
                    [ Html.p [] [ text "Lorem ipsum…" ] ]
            ]
        , actions =
            Just <|
                cardActions
                    { buttons =
                        [ cardActionButton buttonConfig
                            "Visit"
                        ]
                    , icons =
                        [ cardActionIcon iconButtonConfig
                            "favorite"
                        ]
                    }
        }

Card

Outlined Card

A card may have a border by settings its outlined configuration field to True.

card { cardConfig | outlined = True }
    { blocks =
        [ cardBlock <|
            Html.div [] [ Html.h1 [] [ text "Card" ] ]
        ]
    , actions = Nothing
    }

Card Blocks

A card's content is primary comprised of blocks. Blocks may be comprised of arbitrary HTML (generic cardBlock) or a media element (cardMedia). Optionally, a group of card blocks can be marked as the card's primary action which makes the group of card 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.

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

Media Block

Card 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.

cardPrimaryAction
    { cardPrimaryActionConfig
        | onClick = Just CardClicked
    }
    [ cardBlock <|
        Html.h2 [] [ text "Title" ]
    , cardBlock <|
        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.

cardActions
    { buttons =
        [ cardActionButton buttonConfig "View" ]
    , actions =
        [ cardActionIcon iconButtonConfig "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.