ListCards
Usage
The constructor creates a display format for a list of cards, including a header section and a grid layout for the cards.
Basic
Featured Projects
Check out our latest projects
Here are some of the exciting projects we're working on.
IoT and LwM2M for Utilities
Post-Workshop Updates
This workshop addresses the needs of the utilities sector as they deploy new functionality through adoption of the LwM2M protocol.
Why is LightWeight M2M important for Utilities?
As the developer of the LwM2M protocol, OMA aims to help the industry deploy better and more reliably interoperable implementations of the LwM2M specification.
To apply for the presentation materials, please request by filling out the Utility Web Form.
2023-Jun-09
OMA
OMA LwM2M v1.2.1 Release
Latest Release
Latest News from OMASpecWorks ...
We have published a revision of LwM2M v1.2!
In December 2020, we published LwM2M v1.2, which included a range of new features. Since then, we received developer feedback – both from member companies and from the open source community through our Github issue tracker, see Issues. As a result of all this feedback, we have clarified the specification text and we are happy to announce the publication of LwM2M v1.2.1 - the revision of LwM2M v1.2.
2022-Dec-09
OMA
::ShListCards
---
ui:
gap: gap-6
description: This constructor is standalone
title: |
Featured Projects
subtitle: |
Check out our latest projects
text: |
Here are some of the exciting projects we're working on.
cols: 2
cardID: [55, 50]
---
::
Advanced settings
An example with customized ui attributes for enhanced display:
Advanced Usage of this constuctor
Check out the looks and feels
Feel free to explore any styling option using Tailwind classes!
IoT and LwM2M for Utilities
Post-Workshop Updates
This workshop addresses the needs of the utilities sector as they deploy new functionality through adoption of the LwM2M protocol.
Why is LightWeight M2M important for Utilities?
As the developer of the LwM2M protocol, OMA aims to help the industry deploy better and more reliably interoperable implementations of the LwM2M specification.
To apply for the presentation materials, please request by filling out the Utility Web Form.
2023-Jun-09
OMA
OMA LwM2M v1.2.1 Release
Latest Release
Latest News from OMASpecWorks ...
We have published a revision of LwM2M v1.2!
In December 2020, we published LwM2M v1.2, which included a range of new features. Since then, we received developer feedback – both from member companies and from the open source community through our Github issue tracker, see Issues. As a result of all this feedback, we have clarified the specification text and we are happy to announce the publication of LwM2M v1.2.1 - the revision of LwM2M v1.2.
2022-Dec-09
OMA
::ShListCards
---
ui:
header: "text-center mb-4"
title: "text-4xl font-bold text-blue-600"
subtitle: "text-2xl font-medium text-gray-700"
text: "text-lg text-gray-600"
base: "bg-gradient-to-b from-[#8FD2C4] rounded-2xl p-8"
gap: gap-6
cols: 3
title: |
Advanced Usage of this constuctor
subtitle: |
Check out the looks and feels
text: |
Feel free to explore any styling option using Tailwind classes!
cardID: [55, 50, 45]
---
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
title | string | "" | The title of the list of cards, displayed prominently at the top of the header section. |
subtitle | string | "" | The subtitle, which provides additional context or description for the list of cards. |
text | string | "" | Additional descriptive text or instructions displayed below the subtitle. |
cols | number | DEFAULT_COLS | The number of columns in the grid layout for the cards. The `gridClass` inteligentlly calculates number of cols that can be visible depending of the width of the screen. For any screen larger than `1300px` this component will allow user to enter his desired number of columns. Any width lower than that, it will automatically set columns to either 3, 2 or 1. User can always set a smaller number if screen is beyond `1300px`. |
description | string | "" | Note for content writers. It is not rendered on the website. |
cardID | number[] | – | This prop allows this constructor to list cards in order that is inputed |
allTags | string[] | – | Optional list of all available tag names that can be associated with the listed cards. |
Slots
This component has no slots.
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
wrapper | "" | Defines the overall styling for the container that holds the entire list of cards. This typically includes padding, margins, and general layout settings. |
inner | flex justify-between | Container that holds the header and the tag filter side by side. |
tagSection | border border-golden dark:border-golden/[0.6] duration-200 rounded-md block w-fit h-fit pl-3 pr-3 hover:cursor-pointer dark:text-golden hover:border-golden dark:hover:border-golden | Box that holds the tag filter. |
tags.title | title flex justify-center items-center | Title of the tag filter. |
tags.clear | flex items-center border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300 px-3 py-1 rounded-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-all duration-200 | Button that clears the selected tags. |
tags.list | flex items-center px-3 py-1 m-1 border border-neutral-300 dark:border-neutral-600 rounded-sm transition-all duration-300 ease-in-out hover:bg-gray-100 dark:hover:bg-neutral-700 cursor-pointer | A single tag. |
