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

Opaque type representing the view configuration of a card

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

• header or headerH1, headerH2 etc
• footer
• block
• imgTop
• imgBottom

Create a card header element

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

Create a card h1 header

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

Create a card h2 header

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

Create a card h3 header

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

Create a card h4 header

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

Create a card h5 header

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

Create a card h6 header

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

Opaque type representing a card header element

Opaque type representing a card footer element

Create a card footer element

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

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

• attributes List of attributes
• children List of child elements

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

• attributes List of attributes
• children List of child elements

Opaque type representing a card image placed at the top

Opaque type representing a card image placed at the bottom

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

• options - List of card wide styling options

Option to specify horizonal alignment of card contents

Give cards a primary background color

Give cards a secondary background color

Give cards a success background color

Give cards a info background color

Give cards a warning background color

Give cards a danger background color

Give cards a light background color

Give cards a dark background color

Give cards a primary colored outline

Give cards a secondary colored outline

Give cards a success colored outline

Give cards a info colored outline

Give cards a warning colored outline

Give cards a danger colored outline

Give cards a light colored outline

Give cards a dark colored outline

Set the text color used within a card. |

When you need to customize a card item with standard Html.Attribute attributes use this function

Opaque type representing options for customizing the styling of a card

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

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.

Use this function if you want to use ListGroup.custom

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

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

• cards List of card configs

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

Create a card group with keyed cards.

Create a card deck with keyed cards.

Create card columns with keyed cards.