Collection
The Collection component provides a reusable pattern for collection in the interface.
Plain text collection
Just a plain and simple collection. The first item is linked in each list. First collection utilizes the slot, and the second utlizes the array list input method.
Multiline text collection
Sometimes you just want more in life than single rows.
This is a multiline
We also have defined link.
This is a multiline
Nothing more than that.
This is a multiline with an icon
We also have defined link.
This is a multiline with an icon
Nothing more than that. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Collection with secondary
This is a collection utilizing actions / secondary area.
This is a multiline
We also have defined a icon and a action link.
This is a multiline
This has the same configuration as above. But applied a link to the item. Actions then dissapear.
Collection with modifiers
Thie is a collections with all modifiers.
Collection modifier
This utilizes the "bordered" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "compact" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "sharp" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "sharpBottom" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "sharpTop" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
Collection modifier
This utilizes the "unbox" and will therefore display differently.
Linked item
Unlinked item
Unlinked item
API
| Parameter | Default | Description |
|---|---|---|
|
componentElement
|
div | The element type of list. |
|
list
|
false | A array input list, contains 'content' and 'link' array keys. |
|
bordered
|
false | Adds borders. |
|
compact
|
false | If the list should be displayed in a compressed format. |
|
sharp
|
false | Every single edge as sharp as hell, be careful! |
|
sharpBottom
|
false | Makes the bottom really sharp. Yep. |
|
sharpTop
|
false | Makes the top really sharp. Yep. |
|
unbox
|
false | Removes the border. |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-collection--border-radius
|
var(--border-radius) | range | - | Border Radius |
|
--c-collection--border-width
|
var(--border-width) | range | - | Size |
|
--c-collection--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-collection--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-collection--color--primary
|
var(--color--primary) | color | - | Primary |
|
--c-collection--corner-shape
|
var(--corner-shape) | select | square, round, squircle, circular, bevel, scoop | Corner Shape |
|
--c-collection--color--background-border
|
var(--color--background-border) | color | - | Manual companion token for borders on background surfaces. |
|
--c-collection--color--primary-contrast
|
var(--color--primary-contrast) | color | - | Primary Contrast |
|
--c-collection--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-collection--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-collection--font-size-100
|
var(--font-size-100) | range | - | Base font size. |