Cards can be displayed individually or in groups.

Single card

This is an example of a single card with its possible content. Unless further defined via CSS, a single card takes on the full width of the place it has been put into.

Headline

Subtitle

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Multiple cards

To display multiple cards, group them by wrapping them with div.card-container.

Item 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Item 2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Item 3 - with a longer text that requires multiple lines

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

...
...
...
...
...
...

Card sizes

To give the card the desired size, assign one of the following classes to the div.card. If only a single card is used, it must be wrapped with div.card-container as with multiple cards.

Small size (.card-size-small)

The card has a width of 25% of the card container.

Small size (.card-size-small)

The card has a width of 25% of the card container.

Medium size (.card-size-medium)

The card has a width of 50% of the card container.

Medium size (.card-size-medium)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Large size (.card-size-large)

The card has a width of 100% of the card container.

Special size

Many submodules of the module "Admin Tools" use cards on their main page. They use a special form of small size that ensures that the card retains its size in all viewports.

Fixed small size (.card-size-fixed-small)

The card keeps a fixed small size in all viewports.

Fixed small size (.card-size-fixed-small)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Fixed small size (.card-size-fixed-small)

At vero eos et accusam et justo duo dolores et ea rebum.

Fixed small size (.card-size-fixed-small)

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Alignment

If you have multiple cards and each have a link or button, they may not align properly depending on the length of the previously placed headings or description text. To ensure they align regardless of previous content, place the link or button in the div.card-footer - this way the links will always be placed at the bottom of the card.

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Headline

At vero eos et accusam et justo duo dolores et ea rebum.

...
...
...
...

Coloured cards

It is possible to colour cards. However, this option is rarely used - so please use this option sparingly. All available options are listed below. If needed assign one of the following classes to the div.card.
If you want to display the card in its default state, it is not necessary to add .card-default to the div.card - just omit the extra class.

Primary (.card-primary)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Secondary (.card-secondary)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Success (.card-success)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Info (.card-info)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Warning (.card-warning)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Danger (.card-danger)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Notice (.card-notice)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Dark (.card-dark)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Light (.card-light)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Default (.card-default)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Not all listed classes currently have a visual effect. Since they are defined in the CSS, we keep them here in the listing in case they come into use later.

Further usages

Some modules and views extend the card component with additional elements. Some known uses are listed below.

"About" module

The listing of submodules in the "About" module uses an additional div.card-longdesc in div.card-header.

Submodule title

Short description
Description of the submodule

In some sections of the "About" module, tables are included within the card component.

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Table header cell Table header cell
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
...
......

Element information

On top of the element information overlay, rows are included within the card component.

Menu sitemap pages[70]

Page Content
Created At
01-01-70 00:00
Last Modified
01-01-70 00:00
...
Created At
01-01-70 00:00
Last Modified
01-01-70 00:00

"Extension Manager" module

In the extension manager it is possible to get pre-configured distributions. For this view, the cards have been enhanced with an image and some badges.

0.0.0 - 99.9.99

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

0.0.0 - 99.9.99
...
...

Others

It is also possible to display forms and form fields in cards. This is done, for example, in the "Upload Extension" section of the Extension Manager and in the "Feature Toggles" overlay in the "Settings" module.