---
title: Badges & Labels
description: Styled inline elements that provide metadata about their associated content
sass: ./scss/_badges.scss
---

## How To Use

### Content

- Badge can take any text but it's a good idea to keep it short

```html_example
<ul class="inline-list">
    <li><span class="badge">journal article</span></li>
    <li><span class="badge">book chapter</span></li>
    <li><span class="badge">pamphlet</span></li>
    <li><span class="badge">research report</span></li>
</ul>

```

<br />

### Coloring

- Badge can be colored with any of the colors in the [$bonsai-palette](colors.html)

```html_example
<ul class="inline-list">
    <li><span class="badge badge-border dark-green-color">free</span></li>
    <li><span class="badge badge-border dark-green-color">open access</span></li>
    <li><span class="badge badge-border hover-color">new</span></li>
    <li><span class="badge badge-border dark-gray-color">multimedia</span></li>
    <li><span class="badge badge-border dark-gray-color">supplements</span></li>
</ul>
```

<hr />

## Accessibility
### Contrast
1. The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1, except for large-scale text and images of large-scale text, whose contrast ratio should be at least 3:1.
1. Text or images of text that meet one or more criteria below have no contrast requirement:
  - are part of an inactive user interface component
  - are pure decoration
  - are not visible to anyone
  - are part of a picture that contains significant other visual content
  - text that is part of a logo or brand name has no minimum contrast requirement