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 []
        [ Card.titleH1 [] [ text "Block title" ]
        , Card.text [] [ text "Some block content" ]
        , Card.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 and appropriate foreground color

Give cards a success background color and appropriate foreground color

Give cards a info background color and appropriate foreground color

Give cards a warning background color and appropriate foreground color

Give cards a danger background color and appropriate foreground color

Give cards a primary 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 custom dark background color with light text

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.

Opaque type representing a card block element

Opaque type representing a legal card block child element

Create a block h1 title

• attributes List of attributes
• children List of child elements

Create a block h2 title

• attributes List of attributes
• children List of child elements

Create a block h3 title

• attributes List of attributes
• children List of child elements

Create a block h4 title

• attributes List of attributes
• children List of child elements

Create a block h5 title

• attributes List of attributes
• children List of child elements

Create a block h6 title

• attributes List of attributes
• children List of child elements

Create link elements that are placed next to each other in a block using this function

• attributes List of attributes
• children List of child elements

Create a card text element

• attributes List of attributes
• children List of child elements

Create a block quote element

• attributes List of attributes
• children List of child elements

Add a custom HTML element to be displayed in a Card block

Option to specify horizontal alignment of a card block item

Card.blockAlign Text.xs

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

Opaque type representing options for styling a card block

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