Navigation

Social links

Links to Honor Society’s own LinkedIn, Instagram, Facebook and YouTube channels.

Block: .hs-social
CSS: components/social.css (in /brand.css)
JS: None
Status: Built, open to change
Decided in: Components round 3
Markdown: /components/social.md

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 <svg>.
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. This component is for Honor Society’s own channels only.
For a single video, use the Video facade.
For a review or rating profile such as BBB or Trustpilot, use the Rating proof card.

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-<channel>" 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.

Preview on white

<ul class="hs-social" aria-label="Honor Society on social media">
  <li><a class="hs-social__link" href="https://www.linkedin.com/company/honorsociety" data-ph-capture-attribute-cta="social-linkedin" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3.5" y="3.5" width="17" height="17" rx="3"/><path d="M8 10.5V16.5"/><path d="M8 7.5v.1"/><path d="M11.5 16.5v-6"/><path d="M11.5 13.2a2.6 2.6 0 0 1 5.2 0v3.3"/></svg><span class="hs-visually-hidden">LinkedIn</span></a></li>
  <li><a class="hs-social__link" href="https://www.instagram.com/honorsociety/" data-ph-capture-attribute-cta="social-instagram" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="3.8"/><path d="M16.9 7.1v.1"/></svg><span class="hs-visually-hidden">Instagram</span></a></li>
  <li><a class="hs-social__link" href="https://www.facebook.com/HonorSociety" data-ph-capture-attribute-cta="social-facebook" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14.5 21v-7h2.6l.4-3.2h-3V8.9c0-.9.3-1.6 1.6-1.6h1.6V4.5a20 20 0 0 0-2.4-.1c-2.4 0-4 1.4-4 4.1v2.3H8.7V14h2.6v7"/></svg><span class="hs-visually-hidden">Facebook</span></a></li>
  <li><a class="hs-social__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="social-youtube" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="5.5" width="19" height="13" rx="4"/><path d="M10.5 9.6v4.8l4.2-2.4z"/></svg><span class="hs-visually-hidden">YouTube</span></a></li>
</ul>

Icons on navy

No modifier: white icon, white 24% ring.

Preview on navy

<ul class="hs-social" aria-label="Honor Society on social media">
  <li><a class="hs-social__link" href="https://www.linkedin.com/company/honorsociety" data-ph-capture-attribute-cta="social-linkedin" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3.5" y="3.5" width="17" height="17" rx="3"/><path d="M8 10.5V16.5"/><path d="M8 7.5v.1"/><path d="M11.5 16.5v-6"/><path d="M11.5 13.2a2.6 2.6 0 0 1 5.2 0v3.3"/></svg><span class="hs-visually-hidden">LinkedIn</span></a></li>
  <li><a class="hs-social__link" href="https://www.instagram.com/honorsociety/" data-ph-capture-attribute-cta="social-instagram" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="3.8"/><path d="M16.9 7.1v.1"/></svg><span class="hs-visually-hidden">Instagram</span></a></li>
  <li><a class="hs-social__link" href="https://www.facebook.com/HonorSociety" data-ph-capture-attribute-cta="social-facebook" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14.5 21v-7h2.6l.4-3.2h-3V8.9c0-.9.3-1.6 1.6-1.6h1.6V4.5a20 20 0 0 0-2.4-.1c-2.4 0-4 1.4-4 4.1v2.3H8.7V14h2.6v7"/></svg><span class="hs-visually-hidden">Facebook</span></a></li>
  <li><a class="hs-social__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="social-youtube" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="5.5" width="19" height="13" rx="4"/><path d="M10.5 9.6v4.8l4.2-2.4z"/></svg><span class="hs-visually-hidden">YouTube</span></a></li>
</ul>

Labelled

--labelled: icon plus the visible name.

Preview on white

<ul class="hs-social hs-social--labelled" aria-label="Honor Society on social media">
  <li><a class="hs-social__link" href="https://www.linkedin.com/company/honorsociety" data-ph-capture-attribute-cta="social-linkedin" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3.5" y="3.5" width="17" height="17" rx="3"/><path d="M8 10.5V16.5"/><path d="M8 7.5v.1"/><path d="M11.5 16.5v-6"/><path d="M11.5 13.2a2.6 2.6 0 0 1 5.2 0v3.3"/></svg><span class="hs-social__label">LinkedIn</span></a></li>
  <li><a class="hs-social__link" href="https://www.instagram.com/honorsociety/" data-ph-capture-attribute-cta="social-instagram" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="3.8"/><path d="M16.9 7.1v.1"/></svg><span class="hs-social__label">Instagram</span></a></li>
  <li><a class="hs-social__link" href="https://www.facebook.com/HonorSociety" data-ph-capture-attribute-cta="social-facebook" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M14.5 21v-7h2.6l.4-3.2h-3V8.9c0-.9.3-1.6 1.6-1.6h1.6V4.5a20 20 0 0 0-2.4-.1c-2.4 0-4 1.4-4 4.1v2.3H8.7V14h2.6v7"/></svg><span class="hs-social__label">Facebook</span></a></li>
  <li><a class="hs-social__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="social-youtube" data-ph-capture-attribute-cta-loc="profiles"><svg class="hs-social__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="5.5" width="19" height="13" rx="4"/><path d="M10.5 9.6v4.8l4.2-2.4z"/></svg><span class="hs-social__label">YouTube</span></a></li>
</ul>

Text only

--text: no SVG, for hs_html_page, whose validator has no <svg>. Styled as the anchor nav.

Preview on white

<ul class="hs-social hs-social--text" aria-label="Honor Society on social media">
  <li><a class="hs-social__link" href="https://www.linkedin.com/company/honorsociety" data-ph-capture-attribute-cta="social-linkedin" data-ph-capture-attribute-cta-loc="profiles"><span class="hs-social__label">LinkedIn</span></a></li>
  <li><a class="hs-social__link" href="https://www.instagram.com/honorsociety/" data-ph-capture-attribute-cta="social-instagram" data-ph-capture-attribute-cta-loc="profiles"><span class="hs-social__label">Instagram</span></a></li>
  <li><a class="hs-social__link" href="https://www.facebook.com/HonorSociety" data-ph-capture-attribute-cta="social-facebook" data-ph-capture-attribute-cta-loc="profiles"><span class="hs-social__label">Facebook</span></a></li>
  <li><a class="hs-social__link" href="https://www.youtube.com/honorsociety" data-ph-capture-attribute-cta="social-youtube" data-ph-capture-attribute-cta-loc="profiles"><span class="hs-social__label">YouTube</span></a></li>
</ul>