How we work

The shortcodes included in the Mundana theme make it easy to write content, through the admin plugin, taking advantage of the fact that all the classes included in Bootstrap 4 are available, without having to modify any twig template. So far, shortcodes are available that allow you to create alert boxes, badges, cards, buttons and grids.

Alert Shortcode

Documentation for Alerts in Bootstrap 4

Usage

In markdown wrap an alert in [sc-alert] tags. The [sc-alert] shortcode has some optional parameters:

• class - primary (by default), secondary, info, sucess, warning, danger, light, dark
• heading - Show a title in the alert box.
• dismissible - true or false. Show a close icon in the alert box.

An example of the Alert shortcode is as follows:

[sc-alert class="info" heading="Alert with heading"]
To write an XML code you should have at least a basic understanding of XML format and XML schema. You can watch the videos on youtube if you are totally new to XML. By now, I assume you fully understand what XML is and, even if you do not, simply follow the steps outlined below and you will be up to speed on XML.
[/sc-alert]

[sc-alert class="danger" dismissible=true]
To write an XML code you should have at least a basic understanding of XML format and XML schema. You can watch the videos on youtube if you are totally new to XML. By now, I assume you fully understand what XML is and, even if you do not, simply follow the steps outlined below and you will be up to speed on XML.
[/sc-alert]

Example

Badge Shortcode

Documentation for Badges in Bootstrap 4

Usage

In markdown wrap a badge in [sc-badge] tags. The [sc-badge] shortcode has some optional parameters:

• class - primary (by default), secondary, info, sucess, warning, danger, light, dark
• label - Show the badge label.
• url - URL to visit if you click on the badge.
• target - URL destination (self, blank, parent, top).

An example of the Badge shortcode is as follows:

An example of badge shortcode [sc-badge class="warning" url="https://getgrav.org" label="warning" target="blank"][/sc-badge]

Example

An example of badge shortcode warning

Button Shortcode

Documentation for Buttons in Bootstrap 4

Usage

In markdown wrap a button in [sc-button] tags. The [sc-button] shortcode has some optional parameters:

• label - Show the button label.
• type - primary (by default), secondary, info, sucess, warning, danger, light, dark.
• outline- true or false for buttons with outline, without background color.
• size - Button size (sm or lg)
• classes- Additional CSS classes (eg. disabled, btn-block, etc.). NOTE: btn-outline-(color) is not supported with the type parameter.
• url - URL to visit if you click on the button.
• target - URL destination (self, blank, parent, top).

An example of the Button shortcode is as follows:

This is a primary large button [sc-button type="success" url="https://getgrav.org" label="Button" target="blank" size="lg" classes=""][/sc-button]

This is a danger small button [sc-button type="danger" url="https://getgrav.org" label="Button" target="blank" size="sm" classes=""][/sc-button]

This is a default button with outline class [sc-button type="info" url="https://getgrav.org" label="Button" target="blank" outline=true][/sc-button]

This is a danger small button in block [sc-button type="danger" url="https://getgrav.org" label="Button" target="blank" size="sm" classes="btn-block"][/sc-button]

Example

This is a primary button Button

This is a danger small button Button

This is a default button with outline class Button

This is a danger small button in block Button

Cards Shortcode

Documentation for Cards in Bootstrap 4

Usage

In markdown wrap each group of cards in [sc-cards] tags and for each card wrap in [sc-card]. The [sc-card] shortcode has some optional parameters:

• column-size - Size of column
• title - Card title
• button-text- Card button text
• button-color - Card button color (primary, secondary, info, ...). See Bootstrap colors
• button-url - Card button url

An example of the Cards shortcode is as follows:

[sc-cards]
[sc-card title="Special title treatment" button-text="Button 1" button-url="#my-url" button-color="primary" column-size="col-md-4"]
With supporting text below as a natural lead-in to additional content. <br>
With supporting text below as a natural lead-in to additional content. 
[/sc-card]
[sc-card title="Special title treatment" button-text="Button 2" button-url="#another-url" button-color="secondary" column-size="col-md-4"]
With supporting text below as a natural lead-in to additional content.
[/sc-card]  
[sc-card title="Special title treatment" button-text="Button 3" button-url="#another-url" button-color="secondary" column-size="col-md-4"]
With supporting text below as a natural lead-in to additional content.
[/sc-card]
[/sc-cards]

Example

Accordion Shortcode

Documentation for Accordion in Bootstrap 4

Usage

In markdown wrap each accordion in [sc-collapse] tags and for each item wrap in [sc-collapse-item]. The [sc-collapse] shortcode has a mandatory parameter:

• id - Unique identifier for each accordion on the page.

• The [sc-collapse-item] shortcode has some optional parameters:

• open - Indicates which accordion item will be shown open

• title - Accordion item title

An example of the Accordion shortcode is as follows:

[sc-collapse id="accordion1"]
[sc-collapse-item title="Collapsible Group Item #1" open=true]
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
[/sc-collapse-item]

[sc-collapse-item title="Collapsible Group Item #2"]
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
[/sc-collapse-item]

[sc-collapse-item title="Collapsible Group Item #3"]
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
[/sc-collapse-item]
[/sc-collapse]

Example