---json
{
    "aliases": [
        { "path": ":wiki:markup_docs:menubar:card" }
    ],
    "canonical": ":card",
    "description": "A card is a box composed of an image, a text and a call to action",
    "featured-raster-image": ":docs:block:card_illustration.png",
    "images": [
        { "path": ":docs:block:card_illustration.png" }
    ],
    "low_quality_page": "false",
    "page_id": "9rhn4ii6b02f69tnwhoc6"
}
---

====== ComboStrap UI - Card ======

===== About =====
A ''card'' is a box with the dimension of a card that contains summary data such as:
  * a [[docs:content:heading|heading]]
  * a short description
  * with an optional [[docs:content:image|image illustration]]
  * and generally a call to action such as a [[docs:content:link|link]] or a [[docs:content:button|button]]



<note>
If the body contains call-to-actions, this is called a [[teaser|teaser]]
</note>







===== Example =====

==== A Full Card (image, title, content, button styled) ====

<webcode name="Card1" frameborder=0>
<code dw>
<card width="18rem">
{{:teaser_image_1.png|}}
=== Teaser Title  ===
A example taken from [[https://getbootstrap.com/docs/4.3/components/card/#example|the bootstrap quick example]] on how to build a card title in order to make up the bulk of the teaser content.

<btn>[[:start|Go to the best plugin on the universe !]]</btn>
</card>
</code>

</webcode>

==== Teaser is an alias for card. ====
At first, ''teaser'' was the first name of card and you may still [[teaser|use it]].
<webcode name="Card2">
<code dw>
<teaser width="20rem">
{{:teaser_image_2.jpg|}}
=== Teaser Title  ===
A example taken from [[https://getbootstrap.com/docs/4.3/components/card/#example|the bootstrap quick example]] on how to build a card title in order to make up the bulk of the teaser content.

<btn link spacing="pl-0">[[:docs:block:card|Card link]]</btn>
<btn link >[[#|Another link]]</btn>
</teaser>
</code>
</webcode>


<note>
Note that the [[docs:content:image|images]] by default stretch into the whole available card space. The image above is too small for the card and is therefore scaled up.
</note>
==== A card may include other dokuwiki syntax ====

''Card'' may include other [[docs:component|component]]. Example with [[docs:navigation:related|related]]


<webcode name="Card2" frameborder=0>
<code dw>
<teaser width="18rem">
=== Backlinks in Card ===
This pages are talking about this subject:
<related/>
</teaser>
</code>
</webcode>


==== A card may be styled ====

Because a ''card'' is a [[docs:marki|HTML superset component]], you can style it as you wish.


<webcode name="Styled Card"  >
<code dw>
<card width="300px" background-color="dark" color="white" align="center" >
<header>Header is the top of a component</header>
=== A styled card ===
You can style all [[:docs:marki|HTML superset component]] easily.

A [[:docs:styling:align|centered box]] with a dark background [[:docs:styling:color|color]] and a white text.

<btn light>
[[:docs:styling:styling|Check it out !]]
</btn>
</card>
</code>
</webcode>

==== A card may be clickable ====

You may extend the clickable surface of a  link to the whole card with the [[docs:styling:clickable|clickable attribute]].

<webcode name="Default" frameborder="0">
<code dw>
<card width="18rem" clickable="true">
{{:docs:styling:subway_card_tile.png|}}
=== Clickable Card ===
Lorem ipsum

<btn>[[https://combostrap.com/clickable|A clickable card]]</btn>
</card>
</code>
</webcode>


==== A card in a iterator fragment ====

A card can be used in a [[:docs:templating:iterator|iterator fragment]] with the [[docs:content:page-image|page-image]] component as illustration.


Example for the last 4 modified page
<webcode name="Default" frameborder="0">
<code dw>
<iterator>
    <data>select order by date_modified desc limit 3</data>
    <grid max-line=3 gutter="x-4">
        <fragment>
          <box>
             <card clickable>
                <page-image ratio="16:9"/>
                === $h1 ===
                ${description|head(100,'...')} [[$path| ]]
             </card>
          </box>
        </fragment>
    </grid>
</iterator>
</code>
</webcode>

===== Syntax =====

<code dw>
<card attribute>
    illustration
    <header>Label</header>
    Content
    <btn>[[link|button]]</btn>
</card>
</code>
where:
  * ''attributes'' may be any [[docs:styling:styling|styling attributes]]
      * such as [[docs:styling:clickable|clickable]] to make the whole card clickable.
  * ''illustration'' may be:
      * an [[docs:content:image|image link]] (by default, the [[docs:content:image#syntax|ratio]] is ''16:9'')
      * or a [[docs:content:page-image|page-image]] (used in a [[#a_card_in_a_template|template]])
  * ''header'' defines a label placed at the top of the card

A ''card'':
  * is a [[docs:marki|superset HTML component]] and permits then all kind of [[docs:styling:styling|styling]]
  * can be laid out in tile with the [[docs:layout:component:masonry|card-columns]] component

<inote>A [[docs:block:blockquote|blockquote]] is also logically a card that happens to have an external quote in its body.</inote>