Skip to content

Instantly share code, notes, and snippets.

@ThomasPickering

ThomasPickering/Pure_CSS_badges_tags

Last active December 31, 2020 09:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ThomasPickering/5efca7b8763ba47e49cbb43ead4e7a38 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ThomasPickering/5efca7b8763ba47e49cbb43ead4e7a38 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS badges/tags #css
Raw
Pure_CSS_badges_tags
<style>
.tag {
border-radius: 4px;
display: inline-block;
height: 13px;
line-height: 13px;
padding: 2px 3px 2px 3px;
font-size: 11px;
text-decoration: none;
}
.success {
background: #28a745;
color: white;
}
.warning {
background: #ffc107;
color: white;
}
.danger {
background: #dc3545;
color: white;
}
.info {
background: #17a2b8;
color: white;
}
.default {
background: #6c757d;
color: white;
}
</style>
<h1>Tags</h1>
<h2>Example</h2>
<span class="tag success">Success</span>
<span class="tag warning">Warning</span>
<span class="tag danger">Danger</span>
<span class="tag info">Info</span>
<span class="tag default">Default</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment