Cards contain content and actions about a single subject.
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 of a card
config : Config msg
Default configuration of a card
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 : Config msg -> Content msg -> Html msg
Card view function
{ blocks : ( Block msg
, List (Block msg) )
, actions : Maybe (Actions msg)
}
The content of a card is comprised of blocks and actions.
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
}
A card's primary content is comprised of blocks. Blocks may be comprised of arbitrary HTML or a media element.
A card's content 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…" ]
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 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 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.
Card action's button type
button : Material.Button.Config msg -> String -> Button msg
A card action button
Card.button Button.config "Visit"
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")
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")
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
}
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
}