link

<a data-component="link" data-size="3">
  View Pizza
</a>

Import

Import just the breadcrumbs styles.

@import "@winnie-ui/css/spatial/typography";
@import "@winnie-ui/css/visual/link";
@import "@winnie-ui/css/visual/typography";

Anatomy

Attach the appropriate data attributes in the structure below.

<a data-component="link" />

Examples

Size

Use the data-size attribute to change the size.

<a data-component="link" data-size="<size>">
  View Pizza
</a>

Color

Use the data-accent-color attribute to change the color.

<a data-component="link" data-accent-color="<color>">
  View Pizza
</a>

Contrast

Use the data-contrast attribute to change the contrast.

<a data-component="link" data-contrast="<contrast>">
    View Pizza
</a>

Weight

Use the data-weight attribute to change the weight.

<a data-component="link" data-weight="<weight>">
  View Pizza
</a>

Alignment

Use the data-align attribute to change the alignment.

<a data-component="link" data-align="<align>">
  View Pizza
</a>

Disabled

Use the data-disabled attribute to disable the link.

<a data-component="link" data-disabled="true">
  View Pizza
</a>

Reference

link

Represents the link element.