Component Examples
This page demonstrates the various UI components and content elements available in this site template. Use this as a reference when creating your own content.
Available Components
ContentBox
::ContentBox{bgColor="primary" bgShade="900" borderColor="primary" borderShade="500" shadow=true icon=true iconColor="primary" iconShade="400"}
# Optional with icon
<template #icon>
Your icon here (SVG or other content)
</template>
Content here
::
InfoBox
::InfoBox
Content here
::
WarningBox
::WarningBox
Content here
::
EmphasisBox
::EmphasisBox
Content here
::
TwoColumn
::TwoColumn
#left
Left column content
#right
Right column content
::
FullWidthSection
::FullWidthSection{variant="default" padding="lg"}
Content here
::
ProseButton
::ProseButton{variant="primary" to="/link"}
Button text
::
ProseButtonGroup
::ProseButtonGroup
::ProseButton{to="/link1"}Button 1::
::ProseButton{to="/link2"}Button 2::
::
Content Box Examples
Below are examples of different styled content sections that you can use in your Markdown files.
Basic Content Box
You can create a basic content box with a dark background and border:
This is a content box with a dark background and border. You can use Markdown formatting inside it.
- List items work too
- Another list item ::
Custom Content Box
You can customize the background and border colors:
This box uses a primary color scheme with a shadow effect.
Headings work too
All markdown formatting works inside the box.
Content Box with Icon
You can add an icon to your ContentBox:
<template #icon>
This content box has a custom icon. You can use any SVG icon or other content in the icon slot.
Info Box
For information and notes:
Important Information
This is an information box that can be used to highlight important notes or tips in your content.
Warning Box
For warnings or alerts:
Warning!
This is a warning box that can be used to highlight important warnings or caution notices.
Emphasis Box
For highlighting important content:
This content stands out!
Use this box when you want to draw special attention to a section of content.
Full Width Section
The FullWidthSection component creates horizontal sections that extend to the full width of the viewport with configurable backgrounds and padding:
Default Style
This is a full-width section with the default styling and large padding.
Primary Style
This is a full-width section with primary color styling and medium padding.
Dark Style
This is a full-width section with dark styling and extra-large padding.
ContentBox Props
The ContentBox component accepts the following properties:
Prop | Description | Type | Default |
---|---|---|---|
bgColor | Background color name | String | 'zinc' |
bgShade | Background color shade (100-950) | String | '800' |
borderColor | Border color name | String | 'zinc' |
borderShade | Border color shade (100-950) | String | '700' |
shadow | Add shadow effect | Boolean | false |
icon | Show icon area | Boolean | false |
iconColor | Icon color name | String | (same as bgColor) |
iconShade | Icon color shade (100-950) | String | '400' |
::