Share links example

Arrange in columns

Share links are arranged in even columns that adjust according to the available space. Note that the column width is based on an assumed width, so if the link text is long it may wrap (the example below demonstrates this).

This option uses CSS grid, which is not fully supported in IE <= 11, so in those browsers the columns are floated.

How it looks (preview)

How to call this example

<%= render "govuk_publishing_components/components/share_links", {
  columns: true,
  links: [
    {
      href: "/facebook-share-link",
      text: "Facebook",
      icon: "facebook"
    },
    {
      href: "/twitter-share-link",
      text: "Twitter",
      icon: "twitter"
    },
    {
      href: "/email-share-link",
      text: "Email",
      icon: "email"
    },
    {
      href: "/flickr-share-link",
      text: "Flickr",
      icon: "flickr"
    },
    {
      href: "/instagram-share-link",
      text: "Instagram",
      icon: "instagram"
    },
    {
      href: "/linkedin-share-link",
      text: "Linkedin",
      icon: "linkedin"
    }
  ]
} %>