Use this component as a specific tag per item, while also correctly labeling the parent item. For example, an album may contain one or more explicit tracks while other tracks may not be explicit so it is important to note that both the specific tracks and the overall album is marked as explicit.
The example shown below uses nested span elements to show two different text legends (E and Explicit). The reason for this is that the form of the text legend used is controlled by the media type and size. If there sufficient room, the long form legend is used. On smaller media, the short form legend is used. This is the standard coding for use of the explicit component.
- Position the explicit component in close proximity to the title or item being marked as explicit.
- Mark the item containing the explicit content as explicit as well.
- Use this component so that explicit labelling is consistent across all MS sites.
- Do not place the component on a secondary, descriptive area if a title or heading exists.
- Schema definition: The explicit schema defines the acceptable configurations, requirements, and options for each component.
Code and preview
<span class="c-explicit" aria-label="This product contains explicit content"> <span>E</span> <span>EXPLICIT</span> </span>