Used to link to various sections:

First link 
<a class="c-block-link" href="#">
  <div class="c-block-link__content">
    First link
  </div>
  <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
</a>

Content can wrap on to multiple lines:

“They lived on treacle,” said the Dormouse, after thinking a minute or two. “They couldn't have done that, you know,” Alice gently remarked; “they'd have been ill.” “So they were,” said the Dormouse; “VERY ill.” Alice tried to fancy to herself what such an extraordinary ways of living would be like, but it puzzled her too much, so she went on. 
<a class="c-block-link" href="#">
  <div class="c-block-link__content">
    &ldquo;They lived on treacle,&rdquo; said the Dormouse, after thinking a minute or two. &ldquo;They couldn't have done that, you know,&rdquo; Alice gently remarked; &ldquo;they'd have been ill.&rdquo; &ldquo;So they were,&rdquo; said the Dormouse; &ldquo;VERY ill.&rdquo; Alice tried to fancy to herself what such an extraordinary ways of living would be like, but it puzzled her too much, so she went on.
  </div>
  <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
</a>

You can put HTML content into a block link:

  • “They lived on treacle,” said the Dormouse, after thinking a minute or two
  • “They couldn't have done that, you know,” Alice gently remarked; “they'd have been ill”
  • “So they were,” said the Dormouse; “VERY ill”
  • Alice tried to fancy to herself what such an extraordinary ways of living would be like, but it puzzled her too much, so she went on: “But why did they live at the bottom of a well?” “Take some more tea,” the March Hare said to Alice, very earnestly
  • “I've had nothing yet,' Alice replied in an offended tone, “so I can't take more”
 
<a class="c-block-link" href="#">
  <div class="c-block-link__content">
    <ul>
      <li>&ldquo;They lived on treacle,&rdquo; said the Dormouse, after thinking a minute or two</li>
      <li>&ldquo;They couldn't have done that, you know,&rdquo; Alice gently remarked; &ldquo;they'd have been ill&rdquo;</li>
      <li>&ldquo;So they were,&rdquo; said the Dormouse; &ldquo;VERY ill&rdquo;</li>
      <li>Alice tried to fancy to herself what such an extraordinary ways of living would be like, but it puzzled her too much, so she went on: &ldquo;But why did they live at the bottom of a well?&rdquo; &ldquo;Take some more tea,&rdquo; the March Hare said to Alice, very earnestly</li>
      <li>&ldquo;I've had nothing yet,' Alice replied in an offended tone, &ldquo;so I can't take more&rdquo;</li>
    </ul>
  </div>
  <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
</a>

You can use a grid layout to make multiple rows/columns, and add .c-icon--befores to the content if you like.

Beer
Binoculars
Bicycle
Birthday cake
Bolt
Bomb
Briefcase
Bug
Bullhorn
Camera
Car
Check
First link
Second link
Third link
First link
Second link
Third link 
<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--beer"></i> Beer
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--binoculars"></i> Binoculars
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--bicycle"></i> Bicycle
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--birthday-cake"></i> Birthday cake
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--bolt"></i> Bolt
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--bomb"></i> Bomb
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--briefcase"></i> Briefcase
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--bug"></i> Bug
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--bullhorn"></i> Bullhorn
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
  </div>
  <div class="o-grid__row o-grid__row--alt1">
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--camera"></i> Camera
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--car"></i> Car
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          <i class="c-icon c-icon--before c-icon--check"></i> Check
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
  </div>
  <div class="o-grid__row o-grid__row--alt2">
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          First link
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          Second link
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          Third link
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
  </div>
  <div class="o-grid__row o-grid__row--alt3">
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          First link
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          Second link
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
    <div class="o-grid__box o-grid__box--third">
      <a class="c-block-link" href="#">
        <div class="c-block-link__content">
          Third link
        </div>
        <i class="c-block-link__icon c-icon c-icon--chevron-right"></i>
      </a>
    </div>
  </div>
</div>

Options

Atoms

  • block-link
    • content: [string] The text to go in the link. Can include HTML markup (required)
    • url: [string] The URl to link to.