Flexible section

Share

Wraps the share links component

Provides a heading and a stacked instance of the share links component.

See the share links component for more details of what can be passed to the share links.

Overview

How it looks (preview) (preview all)

Share

Passing data to this flexible section

Flexible sections are not called in the way shown below, however this information serves as a reference for the data required by this flexible section.

<%= render "flexible_page/flexible_sections/share", {
  heading_text: "Share",
  links: [
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook"
    },
    {
      href: "/instagram-share-link",
      text: "Instagram",
      icon: "instagram"
    }
  ]
} %>

Accessibility acceptance criteria

Links must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• indicate when they have focus
• change in appearance when touched (in the touch-down state)
• change in appearance when hovered
• be usable with touch
• be usable with voice commands
• have visible text
• have meaningful text