Card
#Card
The Card component is ideal for visually highlighting individual areas of your website. With their help you can structure your content very easily.
The Card component consists of a Title area, a Content area.
The title area is displayed in a larger font. The content area is visually separated by a horizontal dividing line below the title area and is output in the standard font.
Construction
Code
<kol-card _label="Testtitel">
<div>
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</kol-card>
Events
For the handling of events or callbacks, see
| Event | trigger | Value |
|---|---|---|
close | Component is closing | - |
Example
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Usage
Simple standard card
In the standard view, a Card consists of a title area and an empty content area. KoliBri automatically sets the horizontal dividing line between the two areas.
Title of the Card component
You determine the title of the card by setting the _label attribute. Here you can enter any text, including special characters and umlauts. Note that HTML code is not allowed. If not set, three dots are shown. The heading level of the title is passed through the _level attribute. Levels 1 to 6 are possible
Content containers
You determine the contents in the content area of the card by inserting a content container within the <kol-card></kol-card> element. You can insert any HTML code here.
Please note that while you can use any HTML tag as a content container, it is recommended to use a <div></div> tag.
<kol-card _label="Beispiel" _level="1">
<div>Text im Inhalts-Bereich</div>
</kol-card>
Best practices
- Use the Card component to visually encapsulate self-contained subject areas.
- Use the Card component to semantically structure your content.
- Avoid using too many cards on a content page.
- Avoid placing important content within the Card component if the associated action elements (buttons, links, etc.) are not within the same Card.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_hasCloser | _has-closer | Defines whether the element can be closed. | boolean | undefined | false |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_level | _level | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 0 |
_on | -- | Defines the event callback functions for the component. | undefined | { onClose?: EventCallback<Event> | undefined; } | undefined |
Slots
| Slot | Description |
|---|---|
| Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card. |
View example
Live editor
Examples
###Card