Tags
Tags are small components that describe or highlight content.
Solid tag
Modifiers
Colors
Outline tag
Modifiers
Colors
Usage
Tags consists of a short set of characters, numbers, icons, or keywords that help label, organize, and categorize objects. Tags across the Northeastern University webpages work as metadata, data that describes and gives information about other data.
Tags are commonly placed before or after another object or component to highlight detail or categorization of an element. Use tags when you want to indicate status or features in web apps. Include tool tips for user when necessary.
Use Cases
- When providing a number description (Tags with the number of articles for each section: Catalog, Class Registration, Academic Records)Records and Transcript Verification)
- When establishing category description of content (Images with tag description: Faculty, Alumni, Facilities)
Style
Use consistent styles and colors to ensure grabbing user's attention on the badge used. Tags are typically colorful and bold to grab the user's attention.
Accessibility Requirements
Ensure tags are efficiently positioned so the user understands which element its describing. Use tags with a single line item or label.
Tags that convey information with icons or color include text provided by the visually hidden component. This text can be read out by users with assistive technologies.