Helper Component
Usage
Basic
The ShHelperComponent constructor shows two logos stacked vertically. Each logo has a dark-mode and a light-mode version, and the one matching the current color theme is displayed.
By default, the first logo is the OMA logo and the second logo is /images/oma2.png (dark mode only).
::ShHelperComponent
---
firstLogoDark: /logo-dark.png
firstLogoLight: /logo-light.png
secondLogoDark: /images/oma2.png
secondLogoLight: /path/to/second-logo-light.png
---
::
Advanced settings
Resizing the second logo in both color modes:
::ShHelperComponent
---
ui:
secondLogoDark: size-[73%]
secondLogoLight: size-[73%]
---
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
description | string | "" | Note for content writers. It is not rendered on the website. |
firstLogoDark | string | "/logo-dark.png" | Path of the first logo shown in dark mode. |
firstLogoLight | string | "/logo-light.png" | Path of the first logo shown in light mode. |
secondLogoDark | string | "/images/oma2.png" | Path of the second logo shown in dark mode. |
secondLogoLight | string | "" | Path of the second logo shown in light mode. Nothing is rendered in light mode when empty. |
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
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 | "" | Styling for the outermost container. |
inner | flex-col -mt-3 | Styling for the container holding both logos. |
firstLogo | "" | Styling for the container of the first logo. |
firstLogoDark | m-0 max-w-full max-h-full object-contain | First logo in dark mode. |
firstLogoLight | m-0 max-w-full max-h-full object-contain | First logo in light mode. |
secondLogo | mt-10 | Styling for the container of the second logo. |
