A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
view : Config msg -> Html msg
View a card standalone. To create a card you start off with a basic configuration which you can compose of several optional elements.
Card.config [ Card.outlineInfo ]
|> Card.headerH1 [] [ text "My Card Info" ]
|> Card.footer [] [ text "Some footer" ]
|> Card.block []
[ Block.titleH1 [] [ text "Block title" ]
, Block.text [] [ text "Some block content" ]
, Block.link [ href "#" ] [ text "MyLink" ]
]
|> Card.view
Config
for what items you may compose your cards withOpaque type representing the view configuration of a card
You may use the following functions to expand/change a configuration:
header : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a card header element
attributes
List of attributeschildren
List of child elementsconfig
A card Config
that you wish to extend/overrideheaderH1 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a card h1 header
attributes
List of attributeschildren
List of child elementsconfig
A card Config
that you wish to extend/overrideheaderH2 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a card h2 header
attributes
List of attributeschildren
List of child elementsconfig
A card Config
that you wish to extend/overrideheaderH3 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a card h3 header
attributes
List of attributeschildren
List of child elementsconfig
A card Config
that you wish to extend/overrideheaderH4 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a card h4 header
attributes
List of attributeschildren
List of child elementsconfig
A card Config
that you wish to extend/overrideheaderH5 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a card h5 header
attributes
List of attributeschildren
List of child elementsconfig
A card Config
that you wish to extend/overrideheaderH6 : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a card h6 header
attributes
List of attributeschildren
List of child elementsconfig
A card Config
that you wish to extend/overrideOpaque type representing a card header element
Opaque type representing a card footer element
footer : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a card footer element
attributes
List of attributeschildren
List of child elementsconfig
A card Config
that you wish to extend/overrideimgTop : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a element to be shown at the top of a card
attributes
List of attributeschildren
List of child elementsimgBottom : List (Html.Attribute msg) -> List (Html msg) -> Config msg -> Config msg
Create a element to be shown at the bottom of a card
attributes
List of attributeschildren
List of child elementsOpaque type representing a card image placed at the top
Opaque type representing a card image placed at the bottom
You can customize the look and feel of your cards using the following options
config : List (Option msg) -> Config msg
Template/default config which you use as a starting point to compose your cards.
align : Bootstrap.Text.HAlign -> Option msg
Option to specify horizonal alignment of card contents
primary : Option msg
Give cards a primary background color
secondary : Option msg
Give cards a secondary background color
success : Option msg
Give cards a success background color
info : Option msg
Give cards a info background color
warning : Option msg
Give cards a warning background color
danger : Option msg
Give cards a danger background color
light : Option msg
Give cards a light background color
dark : Option msg
Give cards a dark background color
outlinePrimary : Option msg
Give cards a primary colored outline
outlineSecondary : Option msg
Give cards a secondary colored outline
outlineSuccess : Option msg
Give cards a success colored outline
outlineInfo : Option msg
Give cards a info colored outline
outlineWarning : Option msg
Give cards a warning colored outline
outlineDanger : Option msg
Give cards a danger colored outline
outlineLight : Option msg
Give cards a light colored outline
outlineDark : Option msg
Give cards a dark colored outline
textColor : Bootstrap.Text.Color -> Option msg
Set the text color used within a card. |
attrs : List (Html.Attribute msg) -> Option msg
When you need to customize a card item with standard Html.Attribute attributes use this function
Internal.CardOption msg
Opaque type representing options for customizing the styling of a card
block : List (Block.Option msg) -> List (Block.Item msg) -> Config msg -> Config msg
The building block of a card is the card block. Use it whenever you need a padded section within a card. You may have multiple blocks in a card, this function will add blocks to your Cards.
config
A card Config
that you wish to add a block element tolistGroup : List (Bootstrap.ListGroup.Item msg) -> Config msg -> Config msg
You may add list groups, just like you can add card blocks to a Card. Use the li function in the ListGroup module to add and configure the list items.
customListGroup : List (Bootstrap.ListGroup.CustomItem msg) -> Config msg -> Config msg
Use this function if you want to use ListGroup.custom
Cards can be composed into
group : List (Config msg) -> Html msg
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.
cards
List of card configs
deck : List (Config msg) -> Html msg
Need a set of equal width and height cards that aren’t attached to one another? Use card decks
cards
List of card configs
columns : List (Config msg) -> Html msg
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.
cards
List of card configs
keyedGroup : List ( String, Config msg ) -> Html msg
Create a card group with keyed cards.
keyedDeck : List ( String, Config msg ) -> Html msg
Create a card deck with keyed cards.
keyedColumns : List ( String, Config msg ) -> Html msg
Create card columns with keyed cards.