• Meet OMA at Smart City Expo World Congress • Barcelona • 3–5 November 2026 • Hall 3, Street F, Stand 90 •
• Live LwM2M demos • Water 2.0 panel • Smart City SIG sessions •

💧 OMA Utilities WG • Water 2.0 has launched • Utility Membership •

🏙️ OMA Conformance Tool • Apply for Early Access •


Micro Card

Usage

The ShMicroCard constructor represents a micro card that can shocase a company logo with some punchlines and lighter descriptions. Whole card can be a link to a certain location or website.

When using links (anchors) in this component, use either urlWrapper or create a link from title, subtitle or text.
Do NOT combine both as it can result in undesired effects.

Basic

::ShMicroCard
---
urlWrapper: https://www.nasa.gov/
target: _blank
icon: lineicons:nasa
title: |
  NASA 
subtitle: |
  Explore the Universe
text: |
  NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery.
---
::

Layouts

ShMicroCard constructor also comes with a layout option: default, translate, opacity, flat, teaser, cta, logo and snap. The default layout is shown in the Basic example above. Each of the other layouts is shown below on its own.

Translate

On hover the cover slides up to reveal the card content.

::ShMicroCard
---
layout: translate
coverImage: https://science.nasa.gov/wp-content/uploads/2023/11/mercury-messenger-globe-pia15162.jpg
#coverIcon: lineicons:nasa
#coverText: NASA Merecury
icon: game-icons:planet-core
urlWrapper: https://science.nasa.gov/mercury/
title: |
    Mercury
subtitle: |
    God of Translators and Interpreters
text: |
    The smallest planet in our solar system and nearest to the Sun, Mercury is only slightly larger than Earth's Moon. 
---
::

Opacity

On hover the cover fades out to reveal the card content.

::ShMicroCard
---
layout: opacity
coverImage: https://science.nasa.gov/wp-content/uploads/2023/05/venus-single.png?w=398
#coverIcon: lineicons:nasa
#coverText: NASA Venus
icon: fa6-solid:user-astronaut
urlWrapper: https://science.nasa.gov/venus/
title: |
    Venus 
subtitle: |
    How hot is too hot?
text: |
    Venus is the second planet from the Sun, and the sixth largest planet. It’s the hottest planet in our solar system.
---
::

Flat

A plain, transparent card without a cover.

The layout: flat does NOT support coverImage, coverIcon nor coverText props.

::ShMicroCard
---
layout: flat
icon: gis:earth-euro-africa-o
urlWrapper: https://science.nasa.gov/earth/facts/
title: |
    Earth 
subtitle: |
    The Blue Marble
text: |
    Earth – our home planet – is the third planet from the Sun, and the fifth largest planet. It's the only place we know of inhabited by living things.
---
::

Teaser

The cover image is shown faded behind the content and dims further on hover.

::ShMicroCard
---
layout: teaser
coverImage: https://scx2.b-cdn.net/gfx/news/hires/2015/interestingf.jpg
#coverIcon: lineicons:nasa
#coverText: NASA Mars
icon: token-branded:safemars
urlWrapper: https://science.nasa.gov/mars/
title: |
    Mars 
subtitle: |
    Meet the neighbour
text: |
    Mars is the fourth planet from the Sun, and the seventh largest. It’s the only planet we know of inhabited entirely by robots
---
::

CTA

A call to action card. The link is a button at the bottom, the card itself is not clickable.

The layout: cta does NOT have a urlWrapper. Instead, use urlButton

The Moon

Earth`s Companion

From lighting up our skies to maintaining a geological record of our solar system’s history, Earth’s closest celestial neighbor plays a pivotal role in the study of our planet and our solar system.

::ShMicroCard
---
layout: cta
coverImage: https://science.nasa.gov/wp-content/uploads/2024/01/preview-moon-phases.jpg
#coverIcon: lineicons:nasa
#coverText: NASA The Moon
icon: streamline-emojis:new-moon
urlButton: https://science.nasa.gov/moon/
target: _blank
title: |
  The Moon
subtitle: |
  Earth`s Companion
text: |
  From lighting up our skies to maintaining a geological record of our solar system’s history, Earth’s closest celestial neighbor plays a pivotal role in the study of our planet and our solar system. 
---
::

Like translate, but the cover image is fitted whole on a white background, which suits logos.

::ShMicroCard
---
layout: logo
coverImage: https://gpm.nasa.gov/sites/default/files/document_files/NASA-Logo-Large.png
#coverIcon: lineicons:nasa
#coverText: NASA The Moon
icon: lineicons:nasa
urlWrapper: https://www.nasa.gov/
target: _blank
title: |
  NASA
subtitle: |
  Beyond the Frontier 
---
::

Snap

A card whose cover (here an icon) stays in place behind the content.

::ShMicroCard
---
layout: snap
#coverImage: https://gpm.nasa.gov/sites/default/files/document_files/NASA-Logo-Large.png
coverIcon: simple-icons:saturn
#coverText: NASA The Moon
icon: lineicons:nasa
urlWrapper: https://science.nasa.gov/saturn/
target: _blank
title: |
  Saturn
subtitle: |
  Ring Of Power
text: |
  Saturn is the sixth planet from the Sun, and the second largest in the solar system. It’s surrounded by beautiful rings.
---
::

Advanced settings

An example with customized ui attributes for enhanced display:

::ShMicroCard
---
ui:
  default: #if other layout is selected, then its name must be here
    title: text-red-500
    text: text-oma-purple-300
urlImage: https://assets-global.website-files.com/5e19ea5aa7d3a217492e372b/624de949df5a11680ab170b9_Axios%20logo%20-%20RGB%20-%20minimum%20space.png
urlWrapper: https://www.axios.com/
title: |
  Microsoft sets non-profit to cut software related carbon emissions. 
subtitle: |
  Axios gets you smarter, faster on what matters.
text: |
  This is a representation of additional field for text, if it is needed. It also has a *full Markdown capability*.
---
::

Props

PropTypeDefaultDescription
descriptionstring""Note for content writers. It is not rendered on the website.
layoutstring"default"This property allows us to change layout of a constructor which in effect has that our styling is changing and we get different look and effect out of the same component. Options: `default`, `flat`, `teaser`, `snap`, `translate`, `opacity`, `cta` & `logo`
coverImagestring""Link to external or internal image that will be presented as a cover across the whole constructor
coverIconstring""Any valid icon from Iconify
coverTextstring""Inscription that will be presented as a cover across the whole constructor (full Markdown support)
urlWrapperstring""The URL that wraps the component, typically for navigation purposes.
urlButtonstring""The URL the button navigates to when `layout` is set to `cta`. Used instead of `urlWrapper` for that layout.
targetstring"_self"Specifies where to open the linked document.
urlImagestring""The source URL of the image to be displayed.
altImagestring""Alternative text for the image, used for accessibility and in case the image fails to load.
iconstring""Any valid icon from Iconify
altIconstring""Alternative text for the icon, used for accessibility.
titlestring""The title text to be displayed.
subtitlestring""The subtitle text to be displayed, if any.
textstring""The main text content to be displayed.
clipboardbooleanfalseTo show or not the copy button on hover over. It can either be `true` or `false`
uiRecord<string, any>–Add clipboard prop

Slots

This component has no slots.

UI config

Default classes of every styled element. Override any key through the ui prop.

KeyDefault classesDescription
swatch.wrapperrelative group block w-full h-16 overflow-hidden rounded-md border border-black/15 dark:border-white/20 not-proseFixed-size tile. Set the color with a `bg-*` class.
swatch.clipboardabsolute inset-0 flex flex-col items-center justify-center cursor-pointerCovers the tile and centers the icon and the name.
swatch.icontext-3xl opacity-0 transition-all duration-200 group-hover:opacity-100 group-hover:text-xlCopy icon. Hidden until hover, then it shrinks to make room for the name.
swatch.titlemax-h-0 opacity-0 whitespace-nowrap text-xs font-mono leading-none transition-all duration-200 group-hover:max-h-4 group-hover:opacity-100 group-hover:mt-1Color name. Hidden until hover, never wraps.
default.wrappercontainer overflow-hidden relative group flex flex-col rounded-md pl-4 pr-4 pb-4 pt-4 mx-auto max-w-md w-full h-full justify-items-center text-center hover:shadow-md duration-300 border bg-golden/[0.25] border-golden hover:border-neutral-400 dark:bg-neutral-800 dark:border-neutral-700 dark:hover:border-goldenContainer of the card for this variant.
default.coverImageabsolute inset-0 w-full h-full object-cover opacity-60 dark:opacity-60 group-hover:opacity-[25%] transition-opacity duration-500 z-0Background cover image of the card.