<span class="mp c-twi c-twi--right" ><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>
</span>Text with icon - Align right
Ready
{
"label": "Test",
"icon": "arrow-right",
"align": "right"
}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) |