ComboStrap UI - Card

About

A card is a box with the dimension of a card that contains summary data such as:

If the body contains call-to-actions, this is called a teaser

Example

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

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

A example taken from the bootstrap quick example on how to build a card title in order to make up the bulk of the teaser content.

Go to the best plugin on the universe !

Teaser is an alias for card.

At first, teaser was the first name of card and you may still use it.

<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 skin="text" spacing="pl-0">[[:docs:block:card|Card link]]</btn>
<btn skin="text">[[#|Another link]]</btn>
</teaser>

Teaser Title

A example taken from the bootstrap quick example on how to build a card title in order to make up the bulk of the teaser content.

Card link Another link

Note that the images by default stretch into the whole available card space. The image above is too small for the card and is therefore scaled up.

A card may include other dokuwiki syntax

A card may be styled

Because a card is a HTML superset component, you can style it as you wish.

<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>
Header is the top of a component

A styled card

You can style all HTML superset component easily.

A centered box with a dark background color and a white text.

Check it out !

A card may be clickable

You may extend the clickable surface of a link to the whole card with the clickable attribute.

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

Clickable Card

Lorem ipsum

A clickable card

A card in a template

A card can be used in a template with the page-image component as illustration.

Example for the actual page

<template>
    <card clickable width="300">
        <page-image path="$path" ratio="16:9"/>
        === $h1 ===
        $description [[$path| ]]
    </card>
</template>

ComboStrap UI - Card

A card is a box composed of an image, a text and a call to action

Syntax

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

where:

A card:

A blockquote is also logically a card that happens to have an external quote in its body.

Powered by ComboStrap