Socials

Socials — the row of social marks, one component for every place: the footer of every page and the share row of an article — the ground is the only difference.

Beta · Content blocks · packages/css/src/components/socials.css

.pui-socials · __link · ground --on-dark. One row for the footer and an article; the marks are sprite glyphs social-linkedin · social-facebook · social-youtube, painted by the ink (request 40).

Socials — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Ground light / on-dark — the marks are text/default on a light ground and text/on-inverse on a dark one (the footer’s card); nothing else differs
• Each mark is 29 × 29 — the Footer’s drawing, between size/icon/24 and size/icon/32, stated — and the row’s gap is space/12
• A mark is a Mark component (Mark/social-linkedin · -facebook · -youtube): the site’s own drawing, one path, painted by a token — never an image with its colour drawn in
• A link opens the company’s profile, or shares the page, in a new tab, and says where in its name (‘LinkedIn’, ‘Share on LinkedIn’); focus is the ring on the round box
• In code: .pui-socials › .pui-socials__link › .pui-icon › icons.svg#social-<name>; --on-dark on the row

Use when a page links to the company’s profiles or offers to share itself — the footer, the end of an article.

Do not use when the link is to anything but a social profile or a share (Link, Button); one mark stands alone as a logo (the brand folder’s marks); the list is longer than the company’s real profiles.

Relates to Footer, Icon, Link, Icon button.

Anti-patterns a mark recoloured in a brand’s own colour · a mark as an image file with the colour drawn in · a second set of marks for a dark ground · a mark redrawn or stretched · a row per page with its own classes.

Keywords: socials, social links, share, linkedin, facebook, youtube, footer, marks

Figma — page Socials: Socials (2 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens socials.css.

<div class="pui-socials">
  <a class="pui-socials__link" href="…" target="_blank" rel="noopener" aria-label="LinkedIn">
    <span class="pui-icon" aria-hidden="true"><svg><use href="icons.svg#social-linkedin"/></svg></span></a> …</div>
<div class="pui-socials pui-socials--on-dark"> …the same links… </div>

The modifiers

	What it is	Note
Ground	(none) light · --on-dark	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

No story of this component renders a text pair axe can measure — a component made of surfaces and borders rather than words. The token pairs it uses are in artifacts/contrast-matrix.md.

The focus ring

primitive	on	the indicator	over	the change
Socials link	surface/page	shadow #6a66e4 2 px	#ffffff	4.53	ok
Socials link	surface/card	shadow #6a66e4 2 px	#f2f2f7	4.06	ok
Socials link	surface/sunken	shadow #6a66e4 2 px	#f2f2f2	4.05	ok

6 of 6 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).