Components

This theme includes several reusable components you can use in your pages.

Badges

Badges are great for showing versions, status, and other metadata using Shields.io or Badgen.net.

Static Badge

{% include components/badge.html
   label="Jekyll"
   message="4.3+"
   color="CC0000"
   logo="jekyll"
   logoColor="white"
   style="for-the-badge"
%}

Result:

Dynamic Badge (GitHub)

{% include components/badge.html
   type="github/v/release"
   repo="E-Segments/minima-plus"
   style="flat-square"
%}

Badge Styles

flat (default)
flat-square
plastic
for-the-badge
social

Badge Group

Display multiple badges from a data file:

{% include components/badge-group.html badges=site.data.badges.theme %}

Result:

Badge Parameters

Parameter	Description
`service`	`shields` (default) or `badgen`
`type`	Dynamic badge type (e.g., `github/stars`, `npm/v`)
`repo`	GitHub repo for GitHub badges
`label`	Left side text for static badges
`message`	Right side text for static badges
`color`	Badge color (hex without #, or color name)
`style`	Badge style
`logo`	Logo from Simple Icons
`logoColor`	Logo color
`link`	Optional URL to wrap badge

Cards

Cards are great for highlighting features or linking to content.

Basic Card

{% include components/card.html
   title="Card Title"
   description="A brief description of the card content."
   link="/path/to/page"
   link_text="Learn more"
%}

Card with Icon

{% include components/card.html
   title="Feature"
   description="Description here"
   icon='<svg>...</svg>'
%}

Buttons

Buttons come in three styles and three sizes.

Button Styles

{% include components/button.html text="Primary" link="/" style="primary" %}
{% include components/button.html text="Secondary" link="/" style="secondary" %}
{% include components/button.html text="Outline" link="/" style="outline" %}

Button Sizes

{% include components/button.html text="Small" link="/" size="sm" %}
{% include components/button.html text="Medium" link="/" size="md" %}
{% include components/button.html text="Large" link="/" size="lg" %}

Alerts

Use alerts to draw attention to important information.

Alert Types

Info: This is an informational message.

Warning: This is a warning message.

Success: This is a success message.

Danger: This is an error message.

Usage

<div class="callout callout-info">
  <strong>Note:</strong> Your message here.
</div>

Steps List

Create numbered step lists:

First step in the process
Second step with more details
Third step to complete

<ol class="steps">
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Code Blocks

Code blocks are automatically syntax highlighted:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');

def greet(name):
    print(f"Hello, {name}!")

greet("World")

Tables

Tables are styled automatically in prose:

Feature	Free	Pro	Enterprise
Users	1	10	Unlimited
Storage	1GB	50GB	500GB
Support	Community	Email	Dedicated

Images

Images in markdown are responsive:

![Alt text](/path/to/image.jpg)

Blockquotes

This is a blockquote. It’s great for highlighting quotes or important excerpts from content.

— Author Name

Tabs

Create tabbed content sections for organizing related content.

Basic Tabs

{% include components/tabs.html id="demo" tabs="HTML,CSS,JavaScript" %}
<div data-tab-content="demo-0">HTML content here</div>
<div data-tab-content="demo-1">CSS content here</div>
<div data-tab-content="demo-2">JavaScript content here</div>
{% include components/tabs.html id="demo" end=true %}

Tab Styles

underline (default) - Underlined active tab
pills - Pill-style buttons

Code Tabs

Tabbed code blocks for showing multiple languages or package managers.

{% include components/code-tabs.html id="install" tabs=page.install_examples %}

Define tabs in front matter:

install_examples:
  - label: "npm"
    language: "bash"
    code: "npm install package-name"
  - label: "yarn"
    language: "bash"
    code: "yarn add package-name"

Accordion

Expandable/collapsible sections for FAQs or grouped content.

With Data Array

{% include components/accordion.html items=page.faq %}

Define in front matter:

faq:
  - question: "What is Jekyll?"
    answer: "Jekyll is a static site generator."
  - question: "Is it free?"
    answer: "Yes, completely free and open source."

Manual Wrapping

{% include components/accordion.html id="faq" %}
{% include components/accordion-item.html title="First Question" %}
Answer to first question with **markdown** support.
{% include components/accordion-item.html end=true %}
{% include components/accordion.html end=true %}

Accordion Styles

default - Divided list with borders
bordered - Single border around all items
separated - Each item has its own border with spacing

API Endpoint

Document REST API endpoints with method badges, parameters, and responses.

{% include components/endpoint.html
   method="GET"
   path="/api/users/:id"
   description="Retrieve a user by ID"
   auth="required"
   params=page.user_params
   responses=page.user_responses
%}

Or use the api layout to auto-render endpoints from front matter.

CLI Command

Document command-line interface commands.

{% include components/cli-command.html
   name="serve"
   description="Start development server"
   usage="jekyll serve [options]"
   options=page.serve_options
   examples=page.serve_examples
%}

Or use the cli layout for a full CLI reference page.

Stats Counter

Animated number counters that count up when scrolled into view.

With Data Array

{% include components/stats-counter.html stats=page.stats %}

Define in front matter:

stats:
  - value: 10000
    label: "Downloads"
    suffix: "+"
  - value: 99.9
    label: "Uptime"
    suffix: "%"
    decimals: 1
  - value: 50
    label: "Contributors"
  - value: 24
    label: "Support"
    suffix: "/7"

Inline Format

{% include components/stats-counter.html stats="10K+:Downloads,50:Contributors,99%:Uptime,24/7:Support" %}

Stats Counter Parameters

Parameter	Description
`stats`	Array of stat objects or comma-separated string
`columns`	Grid columns: 2, 3, 4 (default: auto)
`style`	Display style: `default`, `cards`, `minimal`
`duration`	Animation duration in ms (default: 2000)

Stat Object Properties

Property	Description
`value`	The number to count to
`label`	Text below the number
`prefix`	Text before number (e.g., “$”)
`suffix`	Text after number (e.g., “+”, “%”)
`decimals`	Decimal places (default: 0)

Custom CSS Classes

You can use these utility classes in your markdown:

.not-prose - Escape prose styling
.cards-grid - Create a card grid
.steps - Numbered steps list
.callout - Alert boxes
.badge-group - Group of badges
.tabs-container - Tabbed content
.accordion - Expandable sections
.endpoint-card - API endpoint documentation
.cli-command - CLI command documentation
.stats-counter - Animated statistics counters

Next Steps

Learn about Accessibility features and ARIA support
See the Customization Guide for advanced styling
Check the Troubleshooting Guide for common issues