Main

Block Links

Blue block links displayed in either a single or two column layout.

Example

Open this example in new window

Macro - Two column


{{ blocklinks({
    heading: "Learning 2 Columns",
    HTML: "<p>Discover resources and information designed to support you on your learning journey</p>",
    columns: "2",
    links: [
      {
        "url": "/listing",
        "label": "Learning Zone"
      },
      {
        "url": "/listing",
        "label": "Equality, Diversity and Inclusion"
      },
      {
        "url": "/listing",
        "label": "Talent Management Toolkit"
      },
      {
        "url": "/listing",
        "label": "Case studies"
      }]
    })
}}

HTML - Two column


<div class="nhsuk-blocklinks">
    <div class="nhsuk-u-reading-width">
      <h2>Learning 2 Columns</h2>
      <p>Discover resources and information designed to support you on your learning journey</p>
    </div>
    <ul class="nhsuk-list-blocklinks nhsuk-list-blocklinks--two-columns">
      <li>
        <a href="/listing">
          <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
            </path>
          </svg> Learning Zone </a>
      </li>
      <li>
        <a href="/listing">
          <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
            </path>
          </svg> Equality, Diversity and Inclusion </a>
      </li>
      <li>
        <a href="/listing">
          <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
            </path>
          </svg> Talent Management Toolkit </a>
      </li>
      <li>
        <a href="/listing">
          <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
            </path>
          </svg> Case studies </a>
      </li>
    </ul>
</div>

Macro - Single column


{{ blocklinks({
    heading: "Learning 2 Columns",
    HTML: "<p>Discover resources and information designed to support you on your learning journey</p>",
    columns: "1",
    links: [
      {
        "url": "/listing",
        "label": "Learning Zone"
      },
      {
        "url": "/listing",
        "label": "Equality, Diversity and Inclusion"
      },
      {
        "url": "/listing",
        "label": "Talent Management Toolkit"
      },
      {
        "url": "/listing",
        "label": "Case studies"
      }]
    })
}}

HTML - Single column


<div class="nhsuk-blocklinks">
    <div class="nhsuk-u-reading-width">
      <h2>Learning 1 Columns</h2>
      <p>Discover resources and information designed to support you on your learning journey</p>
    </div>
    <ul class="nhsuk-list-blocklinks nhsuk-list-blocklinks--one-column">
      <li>
        <a href="/listing">
          <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
            </path>
          </svg> Learning Zone </a>
      </li>
      <li>
        <a href="/listing">
          <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
            </path>
          </svg> Equality, Diversity and Inclusion </a>
      </li>
      <li>
        <a href="/listing">
          <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
            </path>
          </svg> Talent Management Toolkit </a>
      </li>
      <li>
        <a href="/listing">
          <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
            </path>
          </svg> Case studies </a>
      </li>
    </ul>
</div>