ComboStrap UI - Card

1 - About

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

  • a short description
  • an optional image illustration
If the body contains call-to-actions, this is called a teaser

3 - Syntax


<card>
    {{imageTop}}
    <header>Label</header>
    Content
</card>

where:

  • imageTop if the first element is an image, it will be used as a top illustration image.
  • header defines a label placed at the top of the card

A card:

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

4 - Visual

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


<card style="width: 18rem;">
{{:teaser_image_1.png?30|}}

=== 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 spacing="my-3">[[: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 !

4.2 - Teaser is an alias for card.

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


<teaser style="width: 18rem;">
{{teaser_image_2.jpg?25|}}
=== 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 spacing="my-3">[[card|Go to this page !]]</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. Go to this page !

4.3 - A card may include other dokuwiki syntax

Card may include other component. Example with related


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

4.4 - 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 [[styling:html|HTML superset component]] easily.

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

<btn light>
[[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 !

5 - Documentation / Reference

Powered by ComboStrap