Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Composite link

Composite link is a special type of link that has two parts – primary and secondary. Both links can be interacted with independently or treated as one link using the “wrapped” modifier. Optionally, it contains either an icon or a step number.

Composite link with icon

%a.m-composite-link.m-composite-link--with-step.m-composite-link--wrapped{href: "#"}
  %span.m-composite-link__identifier
    .a-stepnumber 1.1
  %span.m-composite-link__title
    %span.m-composite-link__primary Primary
    %span.m-composite-link__secondary Secondary

Composite link with step number

%a.m-composite-link.m-composite-link--wrapped{href: "#"}
  %span.m-composite-link__identifier
    = render partial: "shared/svg_icons/globe"
  %span.m-composite-link__title
    %span.m-composite-link__primary Primary
    %span.m-composite-link__secondary Secondary

Composite link with two links

.m-composite-link
  %span.m-composite-link__title
    %a.m-composite-link__primary{href: "#"} Primary
    %a.m-composite-link__secondary{href: "#"} Secondary