Text&Image
Usage
The ShTextImg constructor gives you an option to hold both image and text in one row. Text size, position and alignement are fully adjustable.
Basic
Hello component
Hello subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et ligula quis justo bibendum consequat. Ut auctor diam sit amet diam ornare euismod. URL elit at dapibus commodo. Maecenas sit amet purus eu metus pharetra pulvinar. In quis scelerisque leo. Praesent scelerisque at nulla non fermentum. Morbi varius nisi eu pharetra molestie. Sed ipsum mauris, tincidunt ut velit ac, luctus egestas mi. Quisque commodo dui in mi aliquam, nec varius nunc luctus.
::ShTextImg
---
positionText: left
spanText: s
alignText: left
urlImage: https://www.nasa.gov/wp-content/uploads/2023/01/draco-4-darpa-nasa-ussf-caption.jpg?resize=2000,1119
title: |
Hello component
subtitle: |
Hello subtitle
text: |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et ligula quis justo bibendum consequat. Ut auctor diam sit amet diam ornare euismod. [URL](https://docs.google.com/spreadsheets/d/18O4QvBpIGMcXMq3VZMICwYB8L7tyJ11T/edit#gid=1718761465) elit at dapibus commodo. <a href="https://en.wikipedia.org/wiki/Gaius_Maecenas">Maecenas</a> sit amet purus eu metus pharetra pulvinar. In quis scelerisque leo. Praesent scelerisque at nulla non fermentum. Morbi varius nisi eu pharetra molestie. Sed ipsum mauris, tincidunt ut velit ac, luctus egestas mi. Quisque commodo dui in mi aliquam, nec varius nunc luctus.
---
::
Advanced settings
An example with customized ui attributes for enhanced display:
Hello component
Hello subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et ligula quis justo bibendum consequat. Ut auctor diam sit amet diam ornare euismod. URL elit at dapibus commodo. Maecenas sit amet purus eu metus pharetra pulvinar. In quis scelerisque leo. Praesent scelerisque at nulla non fermentum. Morbi varius nisi eu pharetra molestie. Sed ipsum mauris, tincidunt ut velit ac, luctus egestas mi. Quisque commodo dui in mi aliquam, nec varius nunc luctus.
::ShTextImg
---
ui:
wrapper: shadow-xl
title: text-4xl
subtitle: font-mono
text: # no style has been applied, added as a reference only.
image: hover:skew-y-3 # when hovered over image, it skews
positionText: left #this is an inline comment example that is not displayed
spanText: s
alignText: left
status: d #options: "a", "b", "c", "d" & default
urlImage: https://www.nasa.gov/wp-content/uploads/2023/01/draco-4-darpa-nasa-ussf-caption.jpg?resize=2000,1119
title: |
Hello component
subtitle: |
Hello subtitle
text: |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et ligula quis justo bibendum consequat. Ut auctor diam sit amet diam ornare euismod. [URL](https://docs.google.com/spreadsheets/d/18O4QvBpIGMcXMq3VZMICwYB8L7tyJ11T/edit#gid=1718761465) elit at dapibus commodo. <a href="https://en.wikipedia.org/wiki/Gaius_Maecenas">Maecenas</a> sit amet purus eu metus pharetra pulvinar. In quis scelerisque leo. Praesent scelerisque at nulla non fermentum. Morbi varius nisi eu pharetra molestie. Sed ipsum mauris, tincidunt ut velit ac, luctus egestas mi. Quisque commodo dui in mi aliquam, nec varius nunc luctus.
---
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
description | string | "" | Note for content writers. It is not rendered on the website. |
positionText | string | "right" | Defines position of text in regard of image. Options: `left`, `right` |
spanText | string | "m" | Defines amount of space that will text occupy. Options: `s`, `m`, `l` |
alignText | string | "center" | Defines alignement of the text. Options: `left`, `center` & `right` |
title | string | "" | The title text to be displayed. |
subtitle | string | "" | The subtitle text to be displayed, if any. |
text | string | "" | The main text content to be displayed. |
urlImage | string | "" | The source URL of the image to be displayed. |
urlImageLight | string | "" | Optional image shown in light mode. When set, `urlImage` is used for dark mode (unless `urlImageDark` is given). |
urlImageDark | string | "" | Optional image shown instead of `urlImage` in dark mode. |
altImage | string | "" | Alternative text for the image, used for accessibility and in case the image fails to load. |
status | string | "" | Styles for the container background depending on the status value. Options: `a`, `b`, `c`, `d` & `default` |
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 | bg-inherit dark:bg-inherit border-neutral-200 dark:border-neutral-500 rounded-md p-3 sm:p-5 mb-12 | Defines the overall styling for the container that holds all the elements of the component. |
title | title font-semibold text-xl leading-7 sm:text-2xl md:text-[32px] | Styles applied to the title text, such as font size and color. |
underline | border-b-[3px] border-oma-yellow-500 w-32 -mt-2 mb-[3em] | Decorative line under the title. |
subtitle | subtitle font-medium text-neutral-600 dark:text-neutral-300 text-base leading-6 sm:text-xl md:text-[24px] break-words -mt-8 | Styles applied to the subtitle text, such as font size and color. |
text | not-prose text-lg sm:text-md md:text-lg lg:text-xl leading-7 break-words mt-16 | Styles applied to the text content, such as font size and color. |
image | mx-auto self-center max-w-full object-contain rounded-md my-[2em] | raw <img>/<hr>/<p> carry the margins the old site got from its typography plugin object-contain + self-center keep the aspect ratio even when a `ui.image` size sets both width and height |
