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:

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'

Back to Home