Content Components Reference

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 new FullWidthSection component creates horizontal sections that extend to the full width of the viewport with configurable backgrounds and padding:

Content here

ContentBox Props

Here are all the available props for the ContentBox component:

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'

Custom Styling Examples

You can add arbitrary classes to both the section and the content container:

Custom Styled Section

This section has:

Custom background opacity (bg-opacity-80)
Shadow effect (shadow-lg)
Centered text content (text-center)
Extra vertical padding on content (py-6)

You can use any valid Tailwind CSS classes to customize both the section and content container.

Gradient Background with Narrow Content

This section demonstrates:

A gradient background using Tailwind's gradient utilities
Content constrained to a narrower width (max-w-3xl)
Centered content container (mx-auto)

Card-Like Section

This section shows how to create a card-like appearance:

Rounded corners (rounded-lg)
Shadow effect (shadow-xl)
Custom margins (my-8 mx-4)
Custom padding on content (py-8)

How to Use These Components

To use these components in your .md files, simply wrap your content with the component tag using the double colon syntax:

::ComponentName
Your content here
::

Additional Styling

You can also combine these components with other Tailwind classes by adding custom HTML to your content:

Centered Content

This content is centered within the box.

Mermaid Diagrams

With remark-mermaidjs enabled, you can now create Mermaid diagrams in your markdown:

The example above creates a flowchart showing a basic patient care process.