Presentational Components

The components in this page are the core presentational components you may want to use. Panels and tabs can be used to organise content sections, while badges and boxes can highlight small, specific pieces of information.

Badges

CODE:

Normal:
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
<br>Pills:
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

OUTPUT:

Normal: Primary Secondary Success Danger Warning Info Light Dark
Pills: Primary Secondary Success Danger Warning Info Light Dark

You can use Badges in combination with headings, buttons, links, etc.

CODE:

Links:
<a href="#" class="badge bg-primary">Primary</a>
<a href="#" class="badge rounded-pill bg-warning text-dark">Warning</a>

Buttons:
<button type="button" class="btn btn-primary">
  Difficulty Level <span class="badge bg-light text-dark">4</span>
</button>

Headings:

### Feature X <span class="badge bg-danger">beta</span> {.no-index}
##### Feature Y <span class="badge rounded-pill bg-success">stable</span> {.no-index}

OUTPUT:

Links: Primary Warning

Buttons:

Headings:

Feature X beta

Feature Y stable

You can refer to Bootstrap documentation to find more information about Badges.

<span class="badge bg-primary">Primary</span>
<span class="badge rounded-pill bg-success">Success</span>
<button type="button" class="btn btn-primary">
  Difficulty Level <span class="badge bg-light text-dark">4</span>
</button>

Boxes

Boxes come with different built-in types.

CODE:

<box>
    default
</box>
<box type="info">
    info
</box>
<box type="warning">
    warning
</box>
<box type="success">
    success
</box>
<box type="important">
    important
</box>
<box type="wrong">
    wrong
</box>
<box type="tip">
    tip
</box>
<box type="definition">
    definition
</box>
<box type="info" dismissible>
    dismissible info
</box>
<box type="success" header="#### Header :rocket:" icon-size="2x">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  <box type="warning" header="You can use **markdown** here! :pizza:" dismissible>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </box>
</box>

OUTPUT:

default

info

warning

success

important

wrong

tip

definition

dismissible info

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

You can use markdown here! 🍕

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The built in types can be colored.

CODE:

<box>
    default
</box>
<box type="info" theme="primary">
    primary
</box>
<box type="info" theme="secondary">
    secondary
</box>
<box type="info" theme="success">
    success
</box>
<box type="info" theme="danger">
    danger
</box>
<box type="info" theme="warning">
    warning
</box>
<box type="info" theme="info">
    info
</box>
<box type="info" theme="light">
    light
</box>
<box type="info" theme="dark">
    dark
</box>

OUTPUT:

default

primary

secondary

success

danger

warning

info

light

dark

MarkBind also supports a light color scheme for boxes

CODE:

<box light>
    default light
</box>
<box type="info" light>
    info light
</box>
<box type="warning" light>
    warning light
</box>
<box type="success" light>
    success light
</box>
<box type="important" light>
    important light
</box>
<box type="wrong" light>
    wrong light
</box>
<box type="tip" light>
    tip light
</box>
<box type="definition" light>
    definition light
</box>
<box type="definition" header="##### Header markdown :rocket:" light>
    definition light with header markdown
</box>

OUTPUT:

default light

info light

warning light

success light

important light

wrong light

tip light

definition light

Header markdown 🚀

definition light with header markdown

MarkBind also supports a seamless style of boxes

As light and seamless are mutually exclusive styles, light takes priority over seamless.

CODE:

<box seamless>
    default seamless
</box>
<box type="info" seamless>
    info seamless
</box>
<box type="warning" seamless>
    warning seamless
</box>
<box type="success" seamless>
    success seamless
</box>
<box type="important" seamless>
    important seamless
</box>
<box type="wrong" seamless>
    wrong seamless
</box>
<box type="tip" seamless>
    tip seamless
</box>
<box type="definition" seamless dismissible>
    dismissible definition seamless
</box>
<box type="definition" header="##### Header markdown :rocket:" seamless>
    success seamless with header markdown
</box>

OUTPUT:

default seamless

info seamless

warning seamless

success seamless

important seamless

wrong seamless

tip seamless

dismissible definition seamless

Header markdown 🚀

success seamless with header markdown

You can further customize the Box's appearance.

CODE:

<box background-color="#ffca6a" border-color="grey" border-left-color="#8b5a01">
default type, styled as an orange box with a brown left border
</box>
<box type="info" color="red" icon=":rocket:">

info, with a custom markdown rocket icon and `red` colored text.

You can use any inline markdown in the `icon` property.
</box>

OUTPUT:

default type, styled as an orange box with a brown left border

🚀

info, with a custom markdown rocket icon and red colored text.

You can use any inline markdown in the icon property.

You can remove the background, icon and borders of preset styles.

CODE:

<box no-icon no-background type="success">
    success box without a tick icon and backgound
</box>

<box no-border type="definition" light>
    definition type box, light style without border
</box>

OUTPUT:

success box without a tick icon and backgound

definition type box, light style without border

Note

Custom styles ( background-color, border-color, border-left-color, icon ) as introduced in the previous section, takes precedence over the no-background, no-border, no-icon attributes.

You can also use icons, resize them and change their color accordingly.

CODE:

<box type="success" icon=":fas-camera:">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
</box>
<box type="warning" icon=":fas-camera:" icon-size="2x">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</box>
<box type="definition" icon=":fas-camera:" icon-size="3x">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</box>
<box type="info" icon=":fas-camera:" icon-color="red" icon-size="3x">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</box>

OUTPUT:

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Options

Name	Type	Default	Description
background-color	`String`	`null`
border-color	`String`	`null`
border-left-color	`String`	`null`	Overrides border-color for the left border.
color	`String`	`null`	Color of the text.
dismissible	`Boolean`	`false`	Adds a button to close the box to the top right corner.
icon^[S]	`String`	`null`	Inline MarkDown text of the icon displayed on the left.
icon-size	`String`	`null`	Resizes the icon. Supports integer-scaling of the icon dimensions e.g. `2x`, `3x`, `4x`, etc.
icon-color	`String`	`null`	Color of the icon.
header^[S]	`String`	`null`	Markdown text of the box header.
type	`String`	`''`	Supports: `info`, `warning`, `success`, `important`, `wrong`, `tip`, `definition`, or empty for default.
theme	`String`	`''`	Supports: `primary`, `secondary`, `success`, `danger`, `warning`, `tip`, `light`, `dark` or empty for default.
light	`Boolean`	`false`	Uses a light color scheme for the box.
seamless	`Boolean`	`false`	Uses a seamless style for the box. If `light` is specified, this style will not be activated.
no-border	`Boolean`	`false`	Removes border, except if styled by `border-color` or `border-left-color`.
no-backgound	`Boolean`	`false`	Removes background, except if styled by `backgound-color` option.
no-icon	`Boolean`	`false`	Removes icon, except if icon is displayed via `icon` option.

<box type="warning">
  warning
</box>

Panels

Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.

CODE:

<panel header="This is your header for a Panel, click me to expand!">
  Lorem ipsum ...
</panel>

OUTPUT:

This is your header for a Panel, click me to expand!

With minimized attribute, panel is minimized into an inline block element. The alt attribute is for you to specify the minimized block header.

CODE:

<panel header="How to cultivate a tomato plant at home" alt="Tomatoes" minimized>
  Lorem ipsum ...
</panel>

OUTPUT:

With expanded attribute, you can set the panels to be expanded when loaded in.

CODE:

<panel header="Have your readers click less to see the Panel's contents" expanded>
  Lorem ipsum ...
</panel>

OUTPUT:

Have your readers click less to see the Panel's contents

Lorem ipsum ...

With the expand-headerless attribute, you can hide the panel header when it is expanded.

CODE:

<panel header="This header will only show when the Panel is collapsed" expand-headerless>
  Lorem ipsum ...
</panel>

OUTPUT:

This header will only show when the Panel is collapsed

With the peek attribute, you may showcase part of your content without expanding the panel.

CODE:

<panel header="Give your readers a peek of the content without expanding Panel" peek>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus 
  facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit 
  eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis 
  dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor 
  pellentesque. 
</panel>

OUTPUT:

Give your readers a peek of the content without expanding Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor pellentesque.

Panel provides many types that change its appearance.

CODE:

<panel header="**light type panel (DEFAULT)**" type="light" minimized>
  ...
</panel>
<panel header="**dark type panel**" type="dark" minimized>
  ...
</panel>
<panel header="**primary type panel**" type="primary" minimized>
  ...
</panel>
<panel header="**secondary type panel**" type="secondary" minimized>
  ...
</panel>
<panel header="**info type panel**" type="info" minimized>
  ...
</panel>
<panel header="**danger type panel**" type="danger" minimized>
  ...
</panel>
<panel header="**warning type panel**" type="warning" minimized>
  ...
</panel>
<panel header="**success type panel**" type="success" minimized>
  ...
</panel>
<panel header="**seamless type panel**" type="seamless" minimized>
  ...
</panel>
<panel header="**minimal type panel**" type="minimal" minimized>
  ...
</panel>

OUTPUT:

Show/Hide buttons using no-switch, no-close, or no-minimized-switch.

CODE:

<panel header="**This minimized panel does not have a switch button**" minimized no-minimized-switch>
  ...
</panel>
<panel header="This panel does not have a switch button" no-switch>
  ...
</panel>
<panel header="This panel does not have a close button" no-close>
  ...
</panel>
<panel header="This panel does not have either buttons" no-close no-switch>
  ...
</panel>

OUTPUT:

This panel does not have a switch button

This panel does not have a close button

This panel does not have either buttons

Use markdown in the header (only inline level markdown are supported).

CODE:

<panel header="**Bold text** :rocket: ![](https://markbind.org/images/logo-lightbackground.png =x20)" type="seamless">
  ...
</panel>

OUTPUT:

Bold text 🚀

If src attribute is provided, the panel will take content from the src specified and add it to the Panel body.

CODE:

<panel header="Content loaded in from 'src'" src="extra/loadContent.html#fragment" minimized></panel>

OUTPUT:

If popup-url attribute is provided, a popup button will be shown. If clicked, it opens the specified url in a new window.

CODE:

<panel header="Try clicking on my pop-up button" popup-url="/userGuide/syntax/extra/loadContent.html">
  This panel has a popup.
</panel>

OUTPUT:

Try clicking on my pop-up button

If preload attribute is provided, the panel body will load the HTML when the page renders instead of after being expanded.

CODE:

<panel header="Right click and inspect my HTML before expanding me!" src="extra/loadContent.html#fragment" preload>
  <p>You should be able to find this text before expanding the Panel.</p>
</panel>

OUTPUT:

Right click and inspect my HTML before expanding me!

You should be able to find this text before expanding the Panel.

You can nest Panels or other components within a Panel.

CODE:

<panel header="Parent Panel">
  <panel header="Level 1 Nested Panel">
    <panel header="Level 2 Nested Panel">
      <tip-box type="success">
        I'm a nested tip-box
      </tip-box>
      <panel header="Level 3 Nested Panel" type="minimal">
        minimal-type panel
      </panel>
    </panel>
  </panel>
  <panel header="Level 1 Nested Panel" type="info">
    Some Text
  </panel>
</panel>

OUTPUT:

Parent Panel

Options

Name	Type	Default	Description
header^[S]	`String`	`''`	The clickable text on the Panel's header. Supports MarkDown text.
alt	`String`	Panel header	The clickable text on the minimised Panel. Supports MarkDown text.
expandable	`Boolean`	`true`	Whether Panel is expandable.
expanded	`Boolean`	`false`	Whether Panel is expanded or collapsed when loaded in.
minimized	`Boolean`	`false`	Whether Panel is minimized.
expand-headerless	`Boolean`	`false`	Whether to hide the header text when the Panel is expanded.
peek	`Boolean`	`false`	Whether to show part of the content when the Panel is collapsed.
no-close	`Boolean`	`false`	Whether to show the close button.
no-switch	`Boolean`	`false`	Whether to show the expand switch.
bottom-switch	`Boolean`	`true`	Whether to show an expand switch at the bottom of the panel. Independent of no-switch.
popup-url	`String`		The url that the popup window will navigate to. The url can be absolute or relative.
preload	`Boolean`	`false`	Whether the content is loaded immediately from `src`.
src	`String`		The url to the remote page to be loaded as the content of the panel.
type	`String`	`light`	The type or color scheme of the panel (single). Supports: `light`, `dark`, `primary`, `secondary`, `info`, `success`, `warning`, `danger`, `seamless`, `minimal`.

<panel header="primary type panel" type="primary" >
  ...
</panel>

Tabs

CODE:

<tabs>
  <tab header="First tab">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
  </tab>
  <tab header="Disabled second tab :x:" disabled>
  </tab>
  <tab header="Tab not printed" class="d-print-none">
    This tab will not be printed.
  </tab>
  <tab-group header="Third tab group :milky_way:">
    <tab header="Stars :star:">
      Some stuff about stars ...
    </tab>
    <tab header="Disabled Moon :new_moon:" disabled>
    </tab>
  </tab-group>
  <tab-group header="Disabled fourth tab group" disabled>
    <tab header="Hidden tab">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
    </tab>
  </tab-group>
</tabs>

OUTPUT:

First tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.

Disabled second tab ❌

Tab not printed

This tab will not be printed.

Third tab group 🌌

Stars ⭐️

Some stuff about stars ...

Disabled Moon 🌑

Disabled fourth tab group

Hidden tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.

Options

tabs:

Name	Type	Default	Description
active	`Number`	`0`	Active Tab index (0-based)

tab:

Name	Type	Default	Description
header	`String`	`null`	Tab title.
disabled	`Boolean`	`false`	Whether Tab is clickable and can be activated.

tab-group:

Name	Type	Default	Description
header	`String`	`null`	Tab Group title.
disabled	`Boolean`	`false`	Whether Tab Group is clickable and can be activated.

Tabs, tab group and individual tab can be omitted during printing by adding bootstrap's display property class="d-print-none" to the respective components.

<tabs>
  <tab header="First tab">
    Content of the first tab
  </tab>
  <tab header="Second tab">
    Contents of the second tab
  </tab>
  <tab-group header="Third tab group :tv:">
    <tab header="Stars :star:">
      Some stuff about stars ...
    </tab>
    <tab header="Moon">
      Some stuff about the moon ...
    </tab>
  </tab-group>
</tabs>

Relevant Tips & Tricks

Indent components

Using Components

Image & Diagram Components

Presentational Components

Badges

Feature X beta

Feature Y stable

Feature Y stable

Boxes

Header 🚀

Header markdown 🚀

Header markdown 🚀

Panels

Tabs

Relevant Tips & Tricks