Catalog · Content
Social links
Links to a site's profiles and feeds, each an icon and a name.
Fits best: any site — the foot of a site, an author's page or a contact page
Example
Three places, each with an icon and its name; then two as icons alone, where the name is read aloud but not shown.
LUZ ships no brand logos: the name says which place. The icons are those of the Icons page, or yours.
Known issues
None known.
Code
Copy the markup
import "@luz-ds/catalog/components/social.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/social.min.css" integrity="sha384-a7rXzTCKPeGP05JiCrgSd1tOyQsheAc5koMRVa+SJ4QqOquCUAa6LOIai3xAbSD1" crossorigin="anonymous"><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
| Class | What it does |
|---|---|
.luz-social | The list: links in a row that wraps |
.luz-social | 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
svgwith aviewBoxand its paths is enough. In a footer, link it after 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.
Contrast and focus are in the Design tab.
Design
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 or the navbar.
Do and don't
.u-sr-only beside an icon alone.Writing the content
The name is the place as it calls itself, in one or two words. The link goes to your profile there, not to its home page.
- Write “Mastodon”, “GitHub”, “RSS feed”, “Email”: a noun, not “Follow us on…”.
- Give an address as a
mailto:link and call it “Email”. - Keep to six links at most; more is a list readers skip.
Contrast and focus
The name and the icon take the secondary text colour, and the primary one under the pointer. Icons alone gain the hover surface.
| Part | Colour on background | Light | Dark | High contrast | Needs |
|---|---|---|---|---|---|
Link and icon | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Link under the pointer | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Icon link under the pointer | --luz-text-primary on --luz-surface-hover | 14.4:1 | 12.6:1 | 20.1:1 | 3:1 |
Link in a card | --luz-text-secondary on --luz-surface | 6.4:1 | 6.9:1 | 19.3:1 | 4.5:1 |
Focus ring | --luz-focus-ring on --luz-surface-page | 5.6:1 | 7.7:1 | 21.0:1 | 3:1 |
Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings and icons.
- Focus: each link keeps core’s ring, 2 px of
--luz-focus-ring, drawn around its rounded edge.
Tokens it uses
The 12 tokens that the .luz-social rules of catalog’s components/social.css read, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.
- Spacing and sizing
--luz-control-md,--luz-control-sm,--luz-space-2xs,--luz-space-3xs,--luz-space-sm,--luz-space-xs- Typography
--luz-font-sans,--luz-text-sm- Radius
--luz-radius-md
Keyboard and ARIA are in the Code tab.