Tag
Overview
The tag element is used as a way of classifying content, typically using keywords. They are added to a web page or other content to help users search for and find related content quickly and easily.
Usage
A tag can be used on it's own or in a stack and displayed anywhere that a quick link to related content could be beneficial to a user e.g. article pages or search.
Props
Tags have a number of props to facilitate a variety of uses:
Note: You can also set the icon size by passing it directly as a size prop to the icon, but by doing this you will override the iconSize passed from overrides. We discourage this approach but we will keep the functionality in case it is needed.
{
small: {
typographyPreset: "utilityLabel010",
stylePreset: "tagDefault",
spaceInset: "spaceInsetSquish010",
minHeight: "sizing050",
iconSize: "iconSize010",
spaceInline: "space010"
},
medium: {
typographyPreset: "utilityLabel020",
stylePreset: "tagDefault",
spaceInset: "spaceInsetSquish020",
minHeight: "sizing060",
iconSize: "iconSize010",
spaceInline: "space010"
},
large: {
typographyPreset: "utilityLabel030",
stylePreset: "tagDefault",
spaceInset: "spaceInsetSquish020",
minHeight: "sizing070",
iconSize: "iconSize020",
spaceInline: "space010"
}
}
Playground
For more information on overriding component defaults, see the docs here.
Variations
NewsKit provides two types of predefined style preset tags variants.
Types
StylePreset | Tag |
---|---|
tagPrimary | Text |
Inverse presets
StylePreset | Tag |
---|---|
tagPrimaryInverse | Text |
Rationale
Styling
Tags are designed to be compact and discreet as they are intended to supplement the primary content.
Tags should have as few words as possible and always have a direct relationship to the content they represent.
Accessibility
Colour
Text and background colours must have a 3:1 minimum contrast ratio. Hover states should have clear contrast change or should include a non colour designator.
SEO
Ranking
Tagging generates hub pages which act as valuable catch-all pages, these rank well in search, are automatically updated and generate more backlinks.
Navigation
Good for site navigation (for crawlers and users), particularly helpful where site structure is poor (The Times)
Descriptive
Tagging helps tell Google what the page content is about, this then enables Google to better surface those pages in search