This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

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.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 - See Config for what items you may compose your cards with
type Config msg = Config { options : List (Option msg) , header : Maybe (Header msg) , footer : Maybe (Footer msg) , imgTop : Maybe (ImageTop msg) , imgBottom : Maybe (ImageBottom msg) , blocks : List (Internal.CardBlock 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.Html msg) -> Config msg -> Config msg

Create a card header element

  • attributes List of attributes
  • children List of child elements
  • config A card Config that you wish to extend/override
headerH1 : List (Html.Attribute msg) -> List (Html.Html msg) -> Config msg -> Config msg

Create a card h1 header

  • attributes List of attributes
  • children List of child elements
  • config A card Config that you wish to extend/override
headerH2 : List (Html.Attribute msg) -> List (Html.Html msg) -> Config msg -> Config msg

Create a card h2 header

  • attributes List of attributes
  • children List of child elements
  • config A card Config that you wish to extend/override
headerH3 : List (Html.Attribute msg) -> List (Html.Html msg) -> Config msg -> Config msg

Create a card h3 header

  • attributes List of attributes
  • children List of child elements
  • config A card Config that you wish to extend/override
headerH4 : List (Html.Attribute msg) -> List (Html.Html msg) -> Config msg -> Config msg

Create a card h4 header

  • attributes List of attributes
  • children List of child elements
  • config A card Config that you wish to extend/override
headerH5 : List (Html.Attribute msg) -> List (Html.Html msg) -> Config msg -> Config msg

Create a card h5 header

  • attributes List of attributes
  • children List of child elements
  • config A card Config that you wish to extend/override
headerH6 : List (Html.Attribute msg) -> List (Html.Html msg) -> Config msg -> Config msg

Create a card h6 header

  • attributes List of attributes
  • children List of child elements
  • config A card Config that you wish to extend/override
type Header msg = Header (Html.Html msg)

Opaque type representing a card header element

Footer

type Footer msg = Footer (Html.Html msg)

Opaque type representing a card footer element

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

Create a card footer element

  • attributes List of attributes
  • children List of child elements
  • config A card Config that you wish to extend/override

Images

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

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

  • attributes List of attributes
  • children List of child elements
imgBottom : List (Html.Attribute msg) -> List (Html.Html msg) -> Config msg -> Config msg

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

  • attributes List of attributes
  • children List of child elements
type ImageTop msg = ImageTop (Html.Html msg)

Opaque type representing a card image placed at the top

type ImageBottom msg = ImageBottom (Html.Html 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.

  • options - List of card wide styling options
align : 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 : 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.

  • blockOptions - List of Block options to configure block level styling
  • item - List of Block Items
  • config A card Config that you wish to add a block element to
listGroup : List (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.

Composing cards

Cards can be composed into

group : List (Config msg) -> Html.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.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.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.Html msg

Create a card group with keyed cards.

keyedDeck : List ( String, Config msg ) -> Html.Html msg

Create a card deck with keyed cards.

keyedColumns : List ( String, Config msg ) -> Html.Html msg

Create card columns with keyed cards.

module Bootstrap.Card
    exposing
        ( view
        , config
        , attrs
        , align
        , danger
        , info
        , primary
        , secondary
        , success
        , warning
        , light
        , dark
        , outlineDanger
        , outlineInfo
        , outlinePrimary
        , outlineSecondary
        , outlineSuccess
        , outlineWarning
        , outlineLight
        , outlineDark
        , textColor
        , imgTop
        , imgBottom
        , header
        , footer
        , headerH1
        , headerH2
        , headerH3
        , headerH4
        , headerH5
        , headerH6
        , block
        , listGroup
        , group
        , deck
        , columns
        , keyedGroup
        , keyedDeck
        , keyedColumns
        , Config
        , Option
        , Footer
        , Header
        , ImageBottom
        , ImageTop
        )

{-| 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

@docs view, Config


## Header

@docs header, headerH1, headerH2, headerH3, headerH4, headerH5, headerH6, Header


## Footer

@docs Footer, footer


## Images

@docs imgTop, imgBottom, ImageTop, ImageBottom


## Options

You can customize the look and feel of your cards using the following options

@docs config, align, primary, secondary, success, info, warning, danger, light, dark, outlinePrimary, outlineSecondary, outlineSuccess, outlineInfo, outlineWarning, outlineDanger, outlineLight, outlineDark, textColor, attrs, Option


# Blocks

@docs block, listGroup


# Composing cards

Cards can be composed into

  - [`groups`](#group)
  - [`decks`](#deck)
  - [`columns`](#columns)

@docs group, deck, columns, keyedGroup, keyedDeck, keyedColumns

-}

import Html.Styled as Html
import Html.Styled.Attributes exposing (class)
import Html.Styled.Keyed as Keyed
import Bootstrap.Text as Text
import Bootstrap.ListGroup as ListGroup
import Bootstrap.Card.Block as Block
import Bootstrap.Card.Internal as Internal
import Bootstrap.Internal.Role as Role


{-| Opaque type representing options for customizing the styling of a card
-}
type alias Option msg =
    Internal.CardOption msg


{-| Opaque type representing the view configuration of a card

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

  - [`header`](#header) or [`headerH1`](#headerH1), [`headerH2`](#headerH2) etc
  - [`footer`](#footer)
  - [`block`](#block)
  - [`imgTop`](#imgTop)
  - [`imgBottom`](#imgBottom)

-}
type Config msg
    = Config
        { options : List (Option msg)
        , header : Maybe (Header msg)
        , footer : Maybe (Footer msg)
        , imgTop : Maybe (ImageTop msg)
        , imgBottom : Maybe (ImageBottom msg)
        , blocks : List (Internal.CardBlock msg)
        }


{-| Opaque type representing a card header element
-}
type Header msg
    = Header (Html.Html msg)


{-| Opaque type representing a card footer element
-}
type Footer msg
    = Footer (Html.Html msg)


{-| Opaque type representing a card image placed at the top
-}
type ImageTop msg
    = ImageTop (Html.Html msg)


{-| Opaque type representing a card image placed at the bottom
-}
type ImageBottom msg
    = ImageBottom (Html.Html msg)



-- CARD


{-| Option to specify horizonal alignment of card contents
-}
align : Text.HAlign -> Option msg
align align =
    Internal.Aligned align


{-| Give cards a primary background color
-}
primary : Option msg
primary =
    Internal.Coloring <| Internal.Roled Role.Primary


{-| Give cards a secondary background color
-}
secondary : Option msg
secondary =
    Internal.Coloring <| Internal.Roled Role.Secondary


{-| Give cards a success background color
-}
success : Option msg
success =
    Internal.Coloring <| Internal.Roled Role.Success


{-| Give cards a info background color
-}
info : Option msg
info =
    Internal.Coloring <| Internal.Roled Role.Info


{-| Give cards a warning background color
-}
warning : Option msg
warning =
    Internal.Coloring <| Internal.Roled Role.Warning


{-| Give cards a danger background color
-}
danger : Option msg
danger =
    Internal.Coloring <| Internal.Roled Role.Danger


{-| Give cards a light background color
-}
light : Option msg
light =
    Internal.Coloring <| Internal.Roled Role.Light


{-| Give cards a dark background color
-}
dark : Option msg
dark =
    Internal.Coloring <| Internal.Roled Role.Dark


{-| Give cards a primary colored outline
-}
outlinePrimary : Option msg
outlinePrimary =
    Internal.Coloring <| Internal.Outlined Role.Primary


{-| Give cards a secondary colored outline
-}
outlineSecondary : Option msg
outlineSecondary =
    Internal.Coloring <| Internal.Outlined Role.Secondary


{-| Give cards a success colored outline
-}
outlineSuccess : Option msg
outlineSuccess =
    Internal.Coloring <| Internal.Outlined Role.Success


{-| Give cards a info colored outline
-}
outlineInfo : Option msg
outlineInfo =
    Internal.Coloring <| Internal.Outlined Role.Info


{-| Give cards a warning colored outline
-}
outlineWarning : Option msg
outlineWarning =
    Internal.Coloring <| Internal.Outlined Role.Warning


{-| Give cards a danger colored outline
-}
outlineDanger : Option msg
outlineDanger =
    Internal.Coloring <| Internal.Outlined Role.Danger


{-| Give cards a light colored outline
-}
outlineLight : Option msg
outlineLight =
    Internal.Coloring <| Internal.Outlined Role.Light


{-| Give cards a dark colored outline
-}
outlineDark : Option msg
outlineDark =
    Internal.Coloring <| Internal.Outlined Role.Dark


{-| Set the text color used within a card. |
-}
textColor : Text.Color -> Option msg
textColor color =
    Internal.TextColoring color


{-| When you need to customize a card item with standard Html.Attribute attributes use this function
-}
attrs : List (Html.Attribute msg) -> Option msg
attrs attrs =
    Internal.Attrs attrs


{-| Template/default config which you use as a starting point to compose your cards.

  - options - List of card wide styling options

-}
config : List (Option msg) -> Config msg
config options =
    Config
        { options = options
        , header = Nothing
        , footer = Nothing
        , imgTop = Nothing
        , imgBottom = Nothing
        , blocks = []
        }


{-| 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 - See [`Config`](#Config) for what items you may compose your cards with

-}
view :
    Config msg
    -> Html.Html msg
view (Config { options, header, footer, imgTop, imgBottom, blocks }) =
    Html.div
        (Internal.cardAttributes options)
        (List.filterMap
            identity
            [ Maybe.map (\(Header e) -> e) header
            , Maybe.map (\(ImageTop e) -> e) imgTop
            ]
            ++ (Internal.renderBlocks blocks)
            ++ List.filterMap
                identity
                [ Maybe.map (\(Footer e) -> e) footer
                , Maybe.map (\(ImageBottom e) -> e) imgBottom
                ]
        )


{-| Create a <img> element to be shown at the top of a card

  - `attributes` List of attributes
  - `children` List of child elements

-}
imgTop :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
imgTop attributes children (Config config) =
    Config
        { config
            | imgTop =
                Html.img
                    ([ class "card-img-top" ] ++ attributes)
                    children
                    |> ImageTop
                    |> Just
        }


{-| Create a <img> element to be shown at the bottom of a card

  - `attributes` List of attributes
  - `children` List of child elements

-}
imgBottom :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
imgBottom attributes children (Config config) =
    Config
        { config
            | imgBottom =
                Html.img
                    ([ class "card-img-bottom" ] ++ attributes)
                    children
                    |> ImageBottom
                    |> Just
        }


{-| Create a card header element

  - `attributes` List of attributes
  - `children` List of child elements
  - `config` A card [`Config`](#Config) that you wish to extend/override

-}
header :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
header =
    headerPrivate Html.div


{-| Create a card footer element

  - `attributes` List of attributes
  - `children` List of child elements
  - `config` A card [`Config`](#Config) that you wish to extend/override

-}
footer :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
footer attributes children (Config config) =
    Config
        { config
            | footer =
                Html.div
                    (class "card-footer" :: attributes)
                    children
                    |> Footer
                    |> Just
        }


{-| Create a card h1 header

  - `attributes` List of attributes
  - `children` List of child elements
  - `config` A card [`Config`](#Config) that you wish to extend/override

-}
headerH1 :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
headerH1 =
    headerPrivate Html.h1


{-| Create a card h2 header

  - `attributes` List of attributes
  - `children` List of child elements
  - `config` A card [`Config`](#Config) that you wish to extend/override

-}
headerH2 :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
headerH2 =
    headerPrivate Html.h2


{-| Create a card h3 header

  - `attributes` List of attributes
  - `children` List of child elements
  - `config` A card [`Config`](#Config) that you wish to extend/override

-}
headerH3 :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
headerH3 =
    headerPrivate Html.h3


{-| Create a card h4 header

  - `attributes` List of attributes
  - `children` List of child elements
  - `config` A card [`Config`](#Config) that you wish to extend/override

-}
headerH4 :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
headerH4 =
    headerPrivate Html.h4


{-| Create a card h5 header

  - `attributes` List of attributes
  - `children` List of child elements
  - `config` A card [`Config`](#Config) that you wish to extend/override

-}
headerH5 :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
headerH5 =
    headerPrivate Html.h5


{-| Create a card h6 header

  - `attributes` List of attributes
  - `children` List of child elements
  - `config` A card [`Config`](#Config) that you wish to extend/override

-}
headerH6 :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
headerH6 =
    headerPrivate Html.h6


headerPrivate :
    (List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg)
    -> List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Config msg
    -> Config msg
headerPrivate elemFn attributes children (Config config) =
    Config
        { config
            | header =
                elemFn (class "card-header" :: attributes) children
                    |> Header
                    |> Just
        }


{-| 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.
-}
listGroup :
    List (ListGroup.Item msg)
    -> Config msg
    -> Config msg
listGroup items (Config config) =
    Config
        { config
            | blocks =
                config.blocks
                    ++ [ Internal.listGroup items ]
        }


{-| 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.

  - blockOptions - List of Block options to configure block level styling
  - item - List of Block Items
  - `config` A card [`Config`](#Config) that you wish to add a block element to

-}
block :
    List (Block.Option msg)
    -> List (Block.Item msg)
    -> Config msg
    -> Config msg
block options items (Config config) =
    Config
        { config
            | blocks =
                config.blocks
                    ++ [ Internal.block options items ]
        }



-- Grouping of cards


{-| 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`](#Config)

-}
group : List (Config msg) -> Html.Html msg
group cards =
    Html.div
        [ class "card-group" ]
        (List.map view cards)


{-| Need a set of equal width and height cards that aren’t attached to one another? Use card decks

  - `cards` List of [`card configs`](#Config)

-}
deck : List (Config msg) -> Html.Html msg
deck cards =
    Html.div
        [ class "card-deck" ]
        (List.map view cards)


{-| 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`](#Config)

-}
columns : List (Config msg) -> Html.Html msg
columns cards =
    Html.div
        [ class "card-columns" ]
        (List.map view cards)


{-| Create a card group with keyed cards.
-}
keyedGroup : List ( String, Config msg ) -> Html.Html msg
keyedGroup =
    keyedMulti "card-group"


{-| Create a card deck with keyed cards.
-}
keyedDeck : List ( String, Config msg ) -> Html.Html msg
keyedDeck =
    keyedMulti "card-deck"


{-| Create card columns with keyed cards.
-}
keyedColumns : List ( String, Config msg ) -> Html.Html msg
keyedColumns =
    keyedMulti "card-columns"


keyedMulti : String -> List ( String, Config msg ) -> Html.Html msg
keyedMulti clazz keyedCards =
    Keyed.node "div"
        [ class clazz ]
        (List.map (\( key, card ) -> ( key, view card )) keyedCards)