aforemny / material-components-web-elm / Material.Card

Cards contain content and actions about a single subject.

Table of Contents

Resources

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


type Config msg

Configuration of a card

config : Config msg

Default configuration of a card

Configuration Options

setOutlined : Basics.Bool -> Config msg -> Config msg

Specify whether a card should have a visual outline

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks a card

setHref : Maybe String -> Config msg -> Config msg

Specify whether a card is a link card.

Link cards' primary action behave like normal HTML5 anchor tags

setTarget : Maybe String -> Config msg -> Config msg

Specify the target for a link card.

Note that this configuration option will be ignored by cards that do not also set setHref.

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Card

card : Config msg -> Content msg -> Html msg

Card view function


type alias Content msg =
{ blocks : ( Block msg
, List (Block msg) )
, actions : Maybe (Actions msg) 
}

The content of a card is comprised of blocks and actions.

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.


type Block msg

A card's content block

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" ]
        ]

block : Html msg -> Block msg

Card block containing arbitrary HTML

Card.block <|
    Html.div [] [ text "Lorem ipsum…" ]

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.

squareMedia : List (Html.Attribute msg) -> String -> Block msg

Card media block with a square aspect ratio

sixteenToNineMedia : List (Html.Attribute msg) -> String -> Block msg

Card media block with a 16:9 aspect ratio

media : List (Html.Attribute msg) -> String -> Block msg

Card media block of unspecified 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")
        ]
    }


type Actions msg

Card actions type

actions : { buttons : List (Button msg), icons : List (Icon msg) } -> Actions msg

Card actions

A card may contain as actions buttons as well as icons.


type Button msg

Card action's button type

button : Material.Button.Config msg -> String -> Button msg

A card action button

Card.button Button.config "Visit"


type Icon msg

Card action's icon type

icon : Material.IconButton.Config msg -> Material.IconButton.Icon -> Icon msg

Card action icon

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.

fullBleedActions : Button msg -> Actions msg

Card full bleed action

If a card's action is comprised of a single button, that button can be made full width by using cardFullBleedActions.

Card.fullBleedActions
    (Card.button Button.config "Visit")

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
    }