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

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.

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.

Link Card

To make a button essentially behave like a HTML anchor element, use its setHref configuration option. You may use its setTarget configuration option to specify a target.

Card.card
    (Card.config
        |> Card.setHref (Just "#")
        |> Card.setTarget (Just "_blank")
    )
    { blocks =
        ( Card.block <|
            Html.div [] [ Html.h1 [] [ text "Card" ] ]
        , []
        )
    , actions = Nothing
    }

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.block <|
            Html.div [] [ Html.h1 [] [ text "Card" ] ]
        , []
        )
    , actions = Nothing
    }