ComboStrap UI - Card

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

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

<teaser width="18rem">
=== Backlinks in Card ===
This pages are talking about this subject:
<related/>
</teaser>

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

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

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

<card attribute>
    illustration
    <header>Label</header>
    Content
    <btn>[[link|button]]</btn>
</card>