By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Pill tag
Overview
Pill tags are a highlighted text that can have multiple use cases. Often they pile together, so the border width should adapt to the content that's inside them. We usually use them in blogs, products or as an indicator of the active filters.
Design
Development
Management
<!-- PILL TAGS -->
<div class="d-flex flex-wrap">
<!-- PILL -->
<div class="pill pill-border r mr-10 px-10">
Design
</div>
<!-- END: PILL -->
<!-- PILL -->
<div class="pill pill-border r mr-10 px-10">
Development
</div>
<!-- END: PILL -->
<!-- PILL -->
<div class="pill pill-border r mr-10 px-10">
Management
</div>
<!-- END: PILL -->
</div>
<!-- END: PILL TAGS -->
Pill tags should always be inside a wrapper. You can fit as many pill tags as you want inside the wrapper.
Pills can be either outlined or contained, but they should always have a background or border to limit their width.
Pill tags can also switch the <div> tag for a <a> for the link functionality.
Variant
Purpose
Outlined
Only has a border. No Background
Contained
Has border and background. Also changes the color of the text.
Multiple
Shows an example of multiple tags inside their container.
Copied to clipboard