Column
Usage
The ShColumn component is used to organise content of one column in
multi-column layout. The column has header, that can render title and
subtitle in the header accompanied with an image.
Beside the main content the column also can have the footer content as well.
Basic Usage (no style)
This is how a basic ShColumn without style is displayed:
Column Title
*Column Subtitle *
This is ShColumn component design to show content of the first column.
Footer Text
::ShColumn
---
title: Column Title #title
subtitle: "*Column Subtitle *" #use quotations
footerText: "*Footer Text*" # use quotations
---
This is `ShColumn` component design to show content of the first column.
{.w-full .rounded}
::
Basic Usage (with style)
This is how a basic ShColumn with style is displayed:
Column Title
*Column Subtitle *
This is ShColumn component design to show content of the first column.
Footer Text
::ShColumn
---
ui:
wrapper: border-8 text-center # added border around the column and center the text
title: Column Title #title
subtitle: "*Column Subtitle *" #use quotations
footerText: "*Footer Text*" # use quotations
---
This is `ShColumn` component design to show content of the first column.
{.w-full .rounded}
::
Advanced settings
This is an advance example of a ShColumn constructor which contains:
- Column Title and Subtitle is centered,
- Markdown text,
- Bullet points,
- An image, and
- The footer contais two inner columns.
Column Title
Column Subtitle
The ShColumn component can contain any typical Markdown content, including:
- images
- lists
- links
- ... or similar
- any supported component
The footer can have
a complex content
With great power comes
a great responsibility
::ShColumn
---
ui:
wrapper: "border-8" #border to highlight the column contourn
header: #header styling
title: "tracking-wider text-primary text-center" #title styling
subtitle: "text-center" #subtitle styling
footer: "text-center" #footer styling
title: Column Title # title
subtitle: "*Column Subtitle*" #subtitle with quotations to incorporate markdown constructor
footerText: | #footer text contains two columns
:::ShTwoColumns
---
ui:
wrapper: border-8 bg-yellow-100 # show the border for the two columns with background color
---
The footer can have
a complex content
With great power comes
a great responsibility
:::
---
The `ShColumn` component can contain any typical *Markdown* content, including:
* images
* lists
* links
* ... or similar
* any supported component
[ {.w-1/2 .rounded-xl .not-prose .mb-2 .shadow-2xl} ]{.w-full .flex .justify-center}
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
description | string | "" | Note for content writers. It is not rendered on the website. |
title | string | "" | Title of the column |
subtitle | string | "" | Subtitle of the column |
footerText | string | "" | Text at the footer of the column |
size | number | DEFAULT_SIZE | Width of the column in a grid of 12, from 1 to 12. |
class | any | – | Additional classes applied to the root element of the component. |
Slots
default
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
wrapper | "" | Defines the overall styling for the container that holds all the elements of the column. The attribute `border-8` is used to highlight the contur of the wrapper. |
header.wrapper | "" | Container of the header. |
header.title | title text-2xl md:text-[28px] font-bold text-center not-prose | Title text of the header. |
header.subtitle | subtitle text-neutral-500 py-0 not-prose | Subtitle text of the header. |
main | "" | Styles applied to the main content (text, image, list, etc.). This attribute only can be modified by modifying the logic on `sh-column.vue` file. It cannot be modified via the markdown document. |
footer | text-neutral-400 py-0 not-prose | Styles applied to the text displaying the footer text of the column, such as font, size, color, etc. |
FAQs
Q: Is header an attribute and can we configure its style?
Header is an object that contains wrapper, title, and subtitle. It is there so we can differentiate e.g. wrapper for the whole constructor and wrapper only for the header section. So basically, we cannot style header with classes but only objects inside of it. What could we do if we wanted to add class to header is either target the header.wrapper or we can concatenate classes like in the picture below on the line 3
Q: Is size a property or an attribute? Can we style it?
Size is a property with values of a whole number. This number represents an element in an array from sh-grid-sizes.ts. In this case, it takes the value of an element from colSpan array. So if we wanted to style it, we would have to change something in sh-grid-sizes.ts, but since the value of size is a number and it is used specially for grid, adding some other style in array would not make much sense.
Q: Is main an attribute or property? Can we style it? (it is defined in the sh-column.ts property)
Main is an attribute with values of classes. It can be styled and it is to be found in sh-column.ts but it is currently without any values. We could add background to the main and only that section of constructor will have that background.
