# Social links > Links to Honor Society’s own LinkedIn, Instagram, Facebook and YouTube channels. - Block class: `.hs-social` - CSS: `components/social.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: built, open to change - Decision record: https://brand.honorsociety.org/decisions/components-round-3.html - Variants: Icons, Icons on navy, Labelled, Text only - HTML page: https://brand.honorsociety.org/components/social/ ## What it is Honor Society's own channels. Simple 1.5px stroke glyphs, not vendor logos. Hover turns the ring navy. ## When to use - Icons: a compact row of the channels beside other content. - `--labelled`: a band whose content is the channels. - `--text`: body HTML for `hs_html_page`. Its validator allows no ``. - On a navy band, use the default icons with no modifier. ## When not to use - For a member’s or a partner’s channel, use a [Text link](/components/link/). This component is for Honor Society’s own channels only. - For a single video, use the [Video facade](/components/video/). - For a review or rating profile such as BBB or Trustpilot, use the [Rating proof card](/components/rating/). ## Rules - Markup: `ul.hs-social` with `aria-label="Honor Society on social media"`, one `li` per channel, each with an `a.hs-social__link`. - Icons are inline SVG: `viewBox="0 0 24 24"`, `stroke="currentColor"`, stroke-width 1.5. Draw simple glyphs, never vendor logos. - Put the channel name in `span.hs-visually-hidden` for icons, or in `span.hs-social__label` for `--labelled` and `--text`. - Every link carries `data-ph-capture-attribute-cta="social-"` and `data-ph-capture-attribute-cta-loc` set to the band slug. - `--text` uses quiet links with no gold underline. Four gold bars in a row break “one gold element per viewport”. ## Accessibility - Every link has a text name, visible or visually hidden. Each SVG carries `aria-hidden="true" focusable="false"`. - Contrast: the icon is navy, 12.4:1. The line-strong ring is 1.4:1 and is decoration only. On navy the icon is white with a white 24% ring. - Each icon link is a 40px round target. - The ring is a box-shadow, so `:focus-visible` restates the shared focus ring with it. - Transitions stop under `prefers-reduced-motion: reduce`. ## Variants ### Icons 40px round icon links; the channel name is visually hidden. ```html ``` ### Icons on navy No modifier: white icon, white 24% ring. ```html ``` ### Labelled `--labelled`: icon plus the visible name. ```html ``` ### Text only `--text`: no SVG, for hs_html_page, whose validator has no ``. Styled as the anchor nav. ```html ```