ComboStrap UI - Creating a card

Card Illustration

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

Card may include other component. Example with related

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

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>
Subway Card Tile
Clickable Card

Lorem ipsum

A clickable card

A card in a iterator fragment

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

Example for the last 4 modified page

<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>
Release
Combo Release 1.25.3

infinite loop on unknown URL parameters creating a memory error - User...

Excluded By Noindex Tag Google Console
Release 1.25.2

This page is the details of the release 1.25.2. This release is a bug/improvement/compatibility release...

Release
ComboStrap - Latest release

A synonym page to redirect to the latest release

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.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Undraw Animating
How to align a text ?

This howto will show you how you can align your text. With ComboStrap, text alignment is only defined via the align attribute. There is three possible alignement: , ie left for a left-to-right...
Undraw Animating
How to generate and layout a list of pages with a grid and their image?

This howto shows you how to use the page sql, a fragment, the iterator and to generate a grid layout.


Recommended Pages
Bootstrap Default Color
Color - How to specify a Color Value on ComboStrap Component

Color management in ComboStrap
Icon Default Location Combostrap
ComboStrap - Icon Component

An icon component that makes it easy to add icon to your pages
Undraw My Documents
ComboStrap Styling - Make a whole component clickable

When a component contains a link, you can make the whole surface clickable with the clickable attribute
Undraw My Documents
ComboStrap Styling - Skin attribute (Button Emphasis Control)

skin is a ComboStrap styling attribute that defines the emphasis level of your button by applying a set of standard styling attribute on: color elevation (shadow) and border where value is one...
Undraw My Documents
ComboStrap UI - Block

A block component is a component that wraps/encapsulate: content such as text, image,... other block component If the component should start at a new line or expand on multiple line and you can...
Undraw Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...
Card Illustration
ComboStrap UI - Creating a card

A card is a box composed of an image, a text and a call to action
Undraw My Documents
ComboStrap UI - Header

header is the top location of a page or of a component. Combostrap supports: the modification of the page header with the header slot the definition of an header in the following component: ...
Undraw Website Builder Re Ii6e
ComboStrap UI - Masonry

masonry is a layout component. Its children are laid out like a mason-fitting stones in a wall (placing elements based on available vertical space). This layout is handy when you want to lay out a list...
Undraw My Documents
ComboStrap UI - Teaser

A teaser is just an alias for a card with a call to action such as a button. call to actionteaser Syntax Output:



Task Runner