Freedom

Shortcodes: Widgets

┊ Gautham Chettiar ┊ Est. 3 Mins ( 502 Words )
Table of Contents

Expand/Collapse

The Table of Contents above is wrapped in an expand/collapse shortcode. Use it on any page to hide long sections or reveal extra details on demand.

Example 1 : Collapsed section with a title

markdown 
{{< expand title="Click to reveal more" >}}
... markdown content to be displayed
{{< /expand >}}
Click to reveal more

This content is hidden by default. You can include:

  • Markdown formatting
  • Lists and links
  • Code blocks
  • Any other markdown content
python 
def hello():
    print("Hello from inside an expand!")

Click the summary again to collapse.

Example 2: Expanded section with default title

markdown 
{{< expand open="true" >}}
... already expanded content
{{< /expand >}}
Details

Expand also supports an open param that sets initial state of component,open = "true" equals an already expanded component.

Also, if you don’t specify a title, it defaults to “Details”.

Icon

Insert icons inline within markdown content using the icon shortcode.

Example 1: Inserting an icon

markdown 
Here is a star icon: {{< icon name="star" style="regular" >}}

Here is a star icon:

Example 2: Icon with different size

markdown 
Here is same star icon but filled : {{< icon name="star" style="solid" >}}

Here is same star icon but filled :

Icons are fetched from Font Awesome free catalog. Check below links for supported icons in each style:

Badge

Display colorful marker badges inline with your text to highlight important information, versions, statuses, or any other metadata.

Example 1: Simple badge (avoid using it without proper styling)

markdown 
{{% badge %}}Important{{% /badge %}}
Important

Example 2: Badge with style

markdown 
{{% badge style="info" %}}New{{% /badge %}} 
{{% badge style="note" %}}Note{{% /badge %}} 
{{% badge style="tip" %}}Optional{{% /badge %}} 
{{% badge style="warning" %}}Breaking{{% /badge %}} 
{{% badge style="important" %}}Caveat{{% /badge %}} 
{{% badge style="caution" %}}Don'ts{{% /badge %}}

InfoNew NoteNote TipOptional WarningBreaking ImportantCaveat CautionDon’ts

Example 3: Badge with custom title, color and icon

markdown 
{{% badge color="#007bff" textColor="#fff" title="Version" %}}6.6.6{{% /badge %}}
{{% badge color="#dc3545" textColor="#fbff00" icon="angle-double-up" title="Rank" %}}Captain{{% /badge %}}

Version6.6.6 RankCaptain

Example 4: Badge inline with text

markdown 
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 
nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
{{% badge color="#6ab0de" textColor="#000" icon="rocket" %}}Awesome{{% /badge %}} 
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt 
ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
veniam, quis nostrum exercitationem ullam corporis suscipit.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, Awesome consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit.

To remove the default icon or title from a severity style (info, note, tip, warning, important, error), set the parameter to " " (a space).