Text with icon - As link

Ready

Open fullscreen

<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)

Text with icon
As link
Align right