Cards can be displayed individually or in groups.
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.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
To display multiple cards, group them by wrapping them with div.card-container
.
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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
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.
.card-size-small
)The card has a width of 25% of the card container.
.card-size-small
)The card has a width of 25% of the card container.
.card-size-medium
)The card has a width of 50% of the card container.
.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.
.card-size-large
)The card has a width of 100% of the card container.
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.
.card-size-fixed-small
)The card keeps a fixed small size in all viewports.
.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.
.card-size-fixed-small
)At vero eos et accusam et justo duo dolores et ea rebum.
.card-size-fixed-small
)Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
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.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
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.
.card-primary
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.card-secondary
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.card-success
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.card-info
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.card-warning
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.card-danger
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.card-notice
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.card-dark
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.card-light
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.card-default
)Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Some modules and views extend the card component with additional elements. Some known uses are listed below.
The listing of submodules in the "About" module uses an additional div.card-longdesc
in
div.card-header
.
In some sections of the "About" module, tables are included within the card component.
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. |
On top of the element information overlay, rows are included within the card component.
[70]
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.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
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.