Text&Image
Usage
Presentation
This is the display format for the ShTextImg constructor, designed to showcase what are its capabilities.
Example Basic
This is how it is constructed
::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.
---
::
Props
These are the properties and attributes associated to the ShTextImg constructor:
Properties and Attributes Description
The ShTextImg constructor gives you an option to hold both image and text in one row. Text size, position and alignement are fully adjustable. Below is a detailed description of the properties and attributes used in the ShTextImg constructor.
| Property | Attribute | Default | Description |
|---|---|---|---|
ui |
n/a | n/a | The ui property in the component is a configuration object that allows customization of various styling aspects of the component. Each attribute within the ui property targets a specific part of the component display, providing detailed control over its appearance and layout. Below is a detailed description of each attribute within the ui property: |
wrapper |
config.wrapper |
Defines the overall styling for the container that holds all the elements of the component. | |
image |
config.image |
Styles applied to the image element, including properties like size and border radius. | |
title |
config.title |
Styles applied to the title text, such as font size and color. | |
subtitle |
config.subtitle |
Styles applied to the subtitle text, such as font size and color. | |
text |
config.text |
Styles applied to the text content, such as font size and color. | |
positionText |
n/a | right |
Defines position of text in regard of image. Options: left, right |
spanText |
n/a | m |
Defines amount of space that will text occupy. Options: s, m, l
|
alignText |
n/a | center |
Defines alignement of the text. Options: left, center & right
|
status |
n/a | config.status |
Styles for the container background depending on the status value. Options: a, b, c, d & default |
urlImage |
n/a | n/a | The source URL of the image to be displayed. |
altImage |
n/a | n/a | Alternative text for the image, used for accessibility and in case the image fails to load. |
title |
n/a | n/a | The title text to be displayed. |
subtitle |
n/a | n/a | The subtitle text to be displayed, if any. |
text |
n/a | n/a | The main text content to be displayed. |
description |
n/a | n/a | Intented to be used as a help to content writter. Doesn`t render on website. |
Example Usage
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.
This is an example with customized ui attributes for enhanced display:
::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.
---
::
Config
This is the content inside of the ShTextImg.ts & status.ts. It list properties where styles can be applied:
ShTextImg.ts
export default {
wrapper: "bg-gray-50 dark:bg-inherit border-2 border-neutral-300 dark:border-neutral-500 rounded-2xl shadow-2xl p-5",
title: "font-bold text-3xl dark:text-white",
subtitle: "font-semibold text-2xl -mt-6 dark:text-neutral-400",
text: "dark:text-neutral-500 not-prose",
image: "mx-auto rounded-xl",
status: "",
// Default Tailwind CSS values
default: {
}
}
status.ts
const status: { [key: string]: string } = {
a: 'bg-[#FFFFFF] border-[#E3E3E3] text-[#FF0000]',
b: 'bg-[#000000] border-[#000000] text-[#00FF00]',
c: 'bg-[#FFFF00] border-[#FFFF00] text-[#000000]',
d: 'bg-[#ADD8E6] border-[#ADD8E6] text-[#0000FF]',
default: 'bg-neutral-200 border-neutral-200 dark:border-gray-700 dark:bg-slate-800 dark:text-gray-300 text-gray-700',
};
export default status;
Class Descriptions
These represent the class values utilized in the ShTextImg constructor. These values are customizable and can be strengthened or overridden through the ui properties' attributes.
wrapper
- Value:
"px-8 border dark:border-gray-700 rounded-2xl" - Description: This defines the overall styling for the container holding the elements. The value "px-8 border dark:border-gray-700 rounded-2xl" includes horizontal padding of 8 units (px-8), a border (border) with a gray color in dark mode (dark:border-gray-700), and rounded corners (rounded-2xl).
title
- Value:
"font-bold text-2xl" - Description: This defines the styling for the title text. The value "font-bold text-2xl" includes a bold font weight (font-bold) and a double extra-large font size (text-2xl).
subtitle
- Value:
"font-semibold text-xl -mt-6" - Description: This specifies the styling for the subtitle text. The value "font-semibold text-xl -mt-6" includes a semi-bold font weight (font-semibold), an extra-large font size (text-xl), and a negative top margin of 6 units (-mt-6).
text
- Value:
"" - Description: This defines the styling for general text. As it is empty, it implies no specific styles have been set.
image
- Value:
"mx-auto rounded-xl" - Description: This specifies styles for an image. The value "mx-auto rounded-xl" includes horizontal centering (mx-auto) and rounded corners (rounded-xl).
status
- Description: Imported from a separate module (status). It contains additional styles or functionality related to status.
default
- Value:
{} - Description: This object is intended to hold any default Tailwind CSS values that might be used as fallback or initial styles.
These style properties ensure that the ShTextImg component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.