Menu

Text with icon - As link

Ready
<a href="#" class="mp c-twi u-link c-twi--left"><span>Test</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
<use xlink:href="/static/svg/sprite.svg#arrow-right"></use>
</svg>
</a>
{
"label": "Test",
"icon": "arrow-right",
"classes": "u-link",
"link": "#"
}

Text with icon, or twi is a helper component to compose an icon with a label. Commonly used for breadcrumbs, this pattern allows you to pass in an icon id and a label, along with a few additional styling options.

Props

Name Type Description
label string
link string
icon string The id for the icon component
classes string Additional class attributes
align string "left" or "right"

CSS modifiers

Name Type Description
c-twi--[align] left, right Which side is the icon rendered? (defaults to right)