Link

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

1<a href="#" class="link-primary">Primary link</a>

PUIK

Basic Use

For any link component that you use, replace the structure above with the following structure:

1<a
2  href="#"
3  target="_self"
4  title="I'm a tooltip for your link"
5  class="puik-link puik-link--md"
6>
7  I'm a cool link
8</a>

Size

Different sizes are available for each link:

  • sm (small)
  • md (medium)
  • lg (large)

To use any of these sizes, add the puik-alert--${size} class to the root element:

1<a
2  href="#"
3  target="_self"
4  title="I'm a tooltip for your link"
5  class="puik-link puik-link--${size}"
6>
7  I'm a cool link
8</a>

Target

The target attribute defines where the href will be displayed. The following values are available:

  • _self
  • _blank
  • _parent
  • _top
info
For more information about target destinations, see the documentation.

Title

The title provides a tooltip on hover.

info

The way the title attribute is interpreted by screen readers may vary depending on its type and configuration.

While the title attribute adds extra information to the a tag contents, you should still add an aria-label attribute including all the information from the tag and the title to make sure everything is vocalized.

  • What you should not do:

    The title attribute includes information that may not be vocalized by screen readers:

1<a
2  href="#"
3  title="Go to the English page"
4  class="puik-link puik-link--md"
5>
6  Go to the page
7</a>

  • What you should do:

    The title attribute includes information that may not be vocalized by screen readers, but the aria-label attribute will ensure it is:

1<a
2  href="#"
3  title="Go to the English page"
4  aria-label="Go to the English page"
5  class="puik-link puik-link--md"
6>
7  Go to the page
8</a>
← Label
Modal →