# Social links

Links to a site's profiles and feeds, each an icon and a name.

### Known issues
None known.

### Copy the markup
Social links markup
```html
<ul class="luz-social">
  <li>
    <a href="https://example.org/@luz">
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…</svg>
      <span>Mastodon</span>
    </a>
  </li>
  <!-- one li for each place -->
</ul>
```

### Variants and options
- `.luz-social`: The list: links in a row that wraps
- `.luz-social--icons`: Icons alone, each a `--luz-control-md` square; put `.u-sr-only` on each name

### How it works
CSS from `components/social.css` of `@luz-ds/catalog`. No JavaScript.

- An `svg` with a `viewBox` and its paths is enough. In a footer, link it after [site-footer](https://nandovejer.github.io/luz/docs/catalog/site-footer/).

### Without JavaScript
Nothing changes.

### Keyboard and ARIA
The links are native.

- The icon is `aria-hidden`: the text, shown or in `.u-sr-only`, names the link.
- Wrap it in `<nav aria-label="…">` only if readers look for it alone.
- Targets are 36 px (icons alone) or 28 px high, over WCAG 2.5.8's 24 px.

### When to use
Use them to send a reader to your profiles and feeds: in the foot of a site, under an author's name or on a contact page.

### When not to use
Do not use them for the pages of your own site or to share the current page.

- For the site's links, use [site-footer](https://nandovejer.github.io/luz/docs/catalog/site-footer/) or the [navbar](https://nandovejer.github.io/luz/docs/catalog/navbar/).