Badge: A component for quick content identification

[daneah]

The problem

JSTOR has a wide variety of content types, and it's useful to check at a glance what type of content a particular item is across search, browse, and detail contexts. We use a small, all-caps badge to display this information. Right now we're still using Foundation's badge directly, or have re-created that as a one-off in new code.

The solution

Formalize the badge as a new component.

Additional information

The current styling is roughly:

font-size: var(--pharos-font-size-small);
font-weight: var(--pharos-font-weight-bold);
line-height: var(--pharos-line-height-medium);
color: var(--pharos-color-text-40);
text-transform: uppercase;