Presentational Components

User Guide → Presentational Components

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 badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<br>Pills:
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-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 badge-primary">Primary</a>
<a href="#" class="badge badge-pill badge-warning">Warning</a>

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

Headings:

### Feature X <span class="badge badge-danger">beta</span> {.no-index}
##### Feature Y <span class="badge badge-pill badge-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 badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<button type="button" class="btn btn-primary">
  Difficulty Level <span class="badge badge-light">4</span>
</button>

Primary Success

Feature Y stable

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.
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.
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.

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>
default
info
warning
success
important
wrong
tip
definition

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 or no-close.

CODE:

<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.

Loading...

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>

minimal type panel

seamless type panel


info type panel

...

danger type panel


warning type panel


success type 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:

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

This tab will not be printed.
Third tab group 🌌
Some stuff about stars ...

Disabled fourth tab group
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>
Content of the first tab
Contents of the second tab
Third tab group 📺
Some stuff about stars ...
Some stuff about the moon ...


Relevant Tips & Tricks

Indent components