rundis / elm-bootstrap / Bootstrap.Card

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.

Cards

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


type Config msg

Opaque type representing the view configuration of a card

You may use the following functions to expand/change a configuration:

Header

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

Create a card header element

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

Create a card h1 header

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

Create a card h2 header

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

Create a card h3 header

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

Create a card h4 header

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

Create a card h5 header

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

Create a card h6 header


type Header msg

Opaque type representing a card header element

Footer


type Footer msg

Opaque type representing a card footer element

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

Create a card footer element

Images

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

Create a element to be shown at the top of a card

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

Create a element to be shown at the bottom of a card


type ImageTop msg

Opaque type representing a card image placed at the top


type ImageBottom msg

Opaque type representing a card image placed at the bottom

Options

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


type alias Option msg =
Internal.CardOption msg

Opaque type representing options for customizing the styling of a card

Blocks

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.

listGroup : 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

Composing cards

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.

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

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.

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.