Helper Component
Usage
Presentation
The 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
---
::
Props
| Property | Attribute | Default | Description |
|---|---|---|---|
description |
n/a | "" |
Intended to be used as a help to content writer. Doesn`t render on website. |
firstLogoDark |
n/a | /logo-dark.png |
Path of the first logo shown in dark mode. |
firstLogoLight |
n/a | /logo-light.png |
Path of the first logo shown in light mode. |
secondLogoDark |
n/a | /images/oma2.png |
Path of the second logo shown in dark mode. |
secondLogoLight |
n/a | "" |
Path of the second logo shown in light mode. Nothing is rendered in light mode when empty. |
ui |
n/a | n/a | Configuration object for customizing the styling of the component. Each attribute targets a specific part of the component: |
wrapper |
config.wrapper |
Styling for the outermost container. | |
inner |
config.inner |
Styling for the container holding both logos. | |
firstLogo |
config.firstLogo |
Styling for the container of the first logo. | |
firstLogoDark / firstLogoLight |
config.firstLogoDark / config.firstLogoLight |
Styling for the first logo image in dark / light mode. | |
secondLogo |
config.secondLogo |
Styling for the container of the second logo. | |
secondLogoDark / secondLogoLight |
config.secondLogoDark / config.secondLogoLight |
Styling for the second logo image in dark / light mode. |
Example Usage
Advanced Settings
Resizing the second logo in both color modes:
::ShHelperComponent
---
ui:
secondLogoDark: size-[73%]
secondLogoLight: size-[73%]
---
::
Config
These style properties can be modified via ui and are stored in the .ts file:
export default {
wrapper: "",
inner: "flex-col -mt-3",
firstLogo: "",
firstLogoDark: "m-0 max-w-full max-h-full object-contain",
firstLogoLight: "m-0 max-w-full max-h-full object-contain",
secondLogo: "mt-10",
secondLogoDark: "m-0 max-w-full max-h-full object-contain",
secondLogoLight: "m-0 max-w-full max-h-full object-contain",
}
