mirror of
https://github.com/gethinode/hinode.git
synced 2025-10-18 15:33:10 +00:00
29 lines
814 B
Markdown
29 lines
814 B
Markdown
---
|
|
author: "Mark Dumay"
|
|
title: "Badge"
|
|
date: 2023-01-11
|
|
description: "Use the badge to enrich headings and buttons."
|
|
group: components
|
|
layout: docs
|
|
---
|
|
|
|
## Overview
|
|
|
|
Badges can be added to headings and buttons. The badge for a button is part of a [custom shortcode]({{< ref "button" >}} "custom shortcode"). The example below illustrates the HTML code for a heading.
|
|
|
|
## Arguments
|
|
|
|
N/A
|
|
|
|
## Example
|
|
|
|
Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options. The following example displays a badge for a heading of size four.
|
|
|
|
```html
|
|
<h6>Example heading of size four <span class="badge bg-secondary">New</span></h6>
|
|
```
|
|
|
|
The result looks like this.
|
|
|
|
<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
|