Skip to main content

Quick Links

    Quick Links

    Quick Links are Card-based interface component to organize links into easily browsable elements.

    Links:

    The quick link component comes with an icon (optional) and a body.

    <div class="c-card c-card--quick-link o-cover-link">
      <div class="c-card__body">
        <p><a href="#" class="styled-link o-cover-link__overlay">International Patients</a></p>
      </div>
    </div>
    

    The author can add an SVG icon.

    <div class="c-card c-card--quick-link c-card--quick-link--icon o-cover-link">
      <div class="c-card__img">
        <span class="o-svg-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm193.2 152h-82.5c-9-44.4-24.1-82.2-43.2-109.1 55 18.2 100.2 57.9 125.7 109.1zM336 256c0 22.9-1.6 44.2-4.3 64H164.3c-2.7-19.8-4.3-41.1-4.3-64s1.6-44.2 4.3-64h167.4c2.7 19.8 4.3 41.1 4.3 64zM248 40c26.9 0 61.4 44.1 78.1 120H169.9C186.6 84.1 221.1 40 248 40zm-67.5 10.9c-19 26.8-34.2 64.6-43.2 109.1H54.8c25.5-51.2 70.7-90.9 125.7-109.1zM32 256c0-22.3 3.4-43.8 9.7-64h90.5c-2.6 20.5-4.2 41.8-4.2 64s1.5 43.5 4.2 64H41.7c-6.3-20.2-9.7-41.7-9.7-64zm22.8 96h82.5c9 44.4 24.1 82.2 43.2 109.1-55-18.2-100.2-57.9-125.7-109.1zM248 472c-26.9 0-61.4-44.1-78.1-120h156.2c-16.7 75.9-51.2 120-78.1 120zm67.5-10.9c19-26.8 34.2-64.6 43.2-109.1h82.5c-25.5 51.2-70.7 90.9-125.7 109.1zM363.8 320c2.6-20.5 4.2-41.8 4.2-64s-1.5-43.5-4.2-64h90.5c6.3 20.2 9.7 41.7 9.7 64s-3.4 43.8-9.7 64h-90.5z"/></svg>
        </span>
      </div>
      <div class="c-card__body">
        <p><a href="#" class="styled-link o-cover-link__overlay">This is label with many fluffy clouds</a></p>
      </div>
    </div>
    
    <div class="c-card c-card--quick-link o-cover-link">
      <div class="c-card__body">
        <p class="c-card--quick-link__title">Pulmonary Rehabilitation</p>
        <p><a href="#" class="styled-link o-cover-link__overlay">Learn more</a></p>
      </div>
    </div>
    

    Put a background color utility class on the parent container.

    <div class="c-quick-link--gallery u-text-center">
      <!-- Optional Eyebrow -->
      <h4 class="nyp-type-eyebrow u-text-center u-m-b">What Can We Help With?</h4>
      <div class="c-quick-link--gallery__cards u-d-flex u-f-wrap u-f-justify-center">
        <div class="c-card c-card--quick-link c-card--quick-link--icon o-cover-link u-m-r-xxs u-m-b-xxs ">
          <div class="c-card__img">
            <span class="o-svg-icon">
              <svg viewBox="0 0 640 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                <path d="M120 334v18c0 88.2 75.4 160 168 160s168-71.8 168-160v-99.7c32.3-10.1 55.7-40.2 56-75.7.3-43.4-34.6-79.6-78.1-80.6-45-1-81.9 35.2-81.9 80 0 35.8 23.5 66.1 56 76.3V352c0 61.8-53.8 112-120 112s-120-50.2-120-112v-18c68-11.5 120-70.8 120-142V27.5c0-5.6-3.9-10.5-9.4-11.7L208.9.3c-6.5-1.4-12.9 2.6-14.3 9.1l-5.2 23.4c-1.4 6.5 2.6 12.9 9.1 14.3l41.5 9.2v134.4c0 52.9-42.2 96.7-95.1 97.2-53.3.6-96.9-42.6-96.9-95.9V56.4l41.5-9.2c6.5-1.4 10.5-7.8 9.1-14.3L93.4 9.4C92 2.9 85.5-1.1 79.1.3L9.4 15.8C3.9 17 0 21.9 0 27.5V192c0 71.2 52 130.5 120 142zm312-190c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z"></path>
              </svg>
            </span>
          </div>
          <div class="c-card__body">
            <p><a href="#" class="styled-link o-cover-link__overlay">International Patients Lorem ipsum dolor sit amet</a></p>
          </div>
        </div>
        <div class="c-card c-card--quick-link c-card--quick-link--icon o-cover-link u-m-r-xxs u-m-b-xxs ">
          <div class="c-card__img">
            <span class="o-svg-icon">
              <svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" viewBox="0 0 640 512">
                <path d="M425.23 406.49A32.06 32.06 0 00448 416h64a32 32 0 0032-32v-64a32 32 0 00-9.5-22.76L246.68 12.07a41.15 41.15 0 00-58.24 0l-48.38 48.4A41.48 41.48 0 00128 89.89 40.68 40.68 0 00140.34 119zM289.46 100L512 320v64h-64L228.1 161.4l61.36-61.4zM162.69 83.09l48.39-48.4A9.21 9.21 0 01217.6 32a9 9 0 016.45 2.69l44.53 44.54-61.36 61.38-44.53-44.54a9.18 9.18 0 010-12.98zM224 408a8 8 0 008 8h157.61l-31.71-32H232a8 8 0 00-8 8zm8-88h62.49l-31.71-32H232a8 8 0 00-8 8v16a8 8 0 008 8zm376-192H409.15l32.3 32H608v320H32V160h104l-18-18.12A73.25 73.25 0 01107.13 128H32a32 32 0 00-32 32v320a32 32 0 0032 32h576a32 32 0 0032-32V160a32 32 0 00-32-32zM136 424h16a8 8 0 008-8v-16.12c23.62-.63 42.67-20.54 42.67-45.07 0-20-13-37.81-31.58-43.39l-45-13.5c-5.16-1.54-8.77-6.78-8.77-12.73 0-7.27 5.29-13.19 11.79-13.19h28.11a24 24 0 0112.82 3.72 8.21 8.21 0 0010.13-.73l11.75-11.21a8 8 0 00-.57-12.14A57.15 57.15 0 00160 240.29V224a8 8 0 00-8-8h-16a8 8 0 00-8 8v16.12c-23.62.63-42.67 20.55-42.67 45.07 0 20 13 37.81 31.58 43.39l45 13.5c5.16 1.54 8.77 6.78 8.77 12.73 0 7.27-5.29 13.19-11.79 13.19h-28.12a24.08 24.08 0 01-12.77-3.72 8.21 8.21 0 00-10.13.73l-11.8 11.21a8 8 0 00.57 12.14A57.23 57.23 0 00128 399.71V416a8 8 0 008 8z"></path>
              </svg>
            </span>
          </div>
          <div class="c-card__body">
            <p><a href="#" class="styled-link o-cover-link__overlay">Careers</a></p>
          </div>
        </div>
        ...
        <!-- optional horizontal rule when using optional paragraph -->
        <hr class="u-w-100 u-m-t">
        <!-- optional paragraph text -->
        <p class="c-quick-link--gallery__body u-m-0">Have a question about COVID-19? View <a href="#" class="styled-link">our latest updates</a> on what you need to know about COVID-19.</p>
      </div>
    </div>
    
    

    Put a background color utility class on the parent container.

    <div class="c-quick-link--gallery u-text-center">
      <!-- Optional Eyebrow -->
      <h4 class="nyp-type-eyebrow u-text-center u-m-b u-c-white ">Quick Links</h4>
      <div class="c-quick-link--gallery__cards u-d-flex u-f-wrap u-f-justify-center">
        <div class="c-card c-card--quick-link c-card--quick-link--icon o-cover-link u-m-r-xxs u-m-b-xxs ">
          <div class="c-card__img">
            <span class="o-svg-icon">
              <svg viewBox="0 0 640 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                <path d="M120 334v18c0 88.2 75.4 160 168 160s168-71.8 168-160v-99.7c32.3-10.1 55.7-40.2 56-75.7.3-43.4-34.6-79.6-78.1-80.6-45-1-81.9 35.2-81.9 80 0 35.8 23.5 66.1 56 76.3V352c0 61.8-53.8 112-120 112s-120-50.2-120-112v-18c68-11.5 120-70.8 120-142V27.5c0-5.6-3.9-10.5-9.4-11.7L208.9.3c-6.5-1.4-12.9 2.6-14.3 9.1l-5.2 23.4c-1.4 6.5 2.6 12.9 9.1 14.3l41.5 9.2v134.4c0 52.9-42.2 96.7-95.1 97.2-53.3.6-96.9-42.6-96.9-95.9V56.4l41.5-9.2c6.5-1.4 10.5-7.8 9.1-14.3L93.4 9.4C92 2.9 85.5-1.1 79.1.3L9.4 15.8C3.9 17 0 21.9 0 27.5V192c0 71.2 52 130.5 120 142zm312-190c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z"></path>
              </svg>
            </span>
          </div>
          <div class="c-card__body">
            <p><a href="#" class="styled-link o-cover-link__overlay">International Patients Lorem ipsum dolor sit amet</a></p>
          </div>
        </div>
        <div class="c-card c-card--quick-link c-card--quick-link--icon o-cover-link u-m-r-xxs u-m-b-xxs ">
          <div class="c-card__img">
            <span class="o-svg-icon">
              <svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" viewBox="0 0 640 512">
                <path d="M425.23 406.49A32.06 32.06 0 00448 416h64a32 32 0 0032-32v-64a32 32 0 00-9.5-22.76L246.68 12.07a41.15 41.15 0 00-58.24 0l-48.38 48.4A41.48 41.48 0 00128 89.89 40.68 40.68 0 00140.34 119zM289.46 100L512 320v64h-64L228.1 161.4l61.36-61.4zM162.69 83.09l48.39-48.4A9.21 9.21 0 01217.6 32a9 9 0 016.45 2.69l44.53 44.54-61.36 61.38-44.53-44.54a9.18 9.18 0 010-12.98zM224 408a8 8 0 008 8h157.61l-31.71-32H232a8 8 0 00-8 8zm8-88h62.49l-31.71-32H232a8 8 0 00-8 8v16a8 8 0 008 8zm376-192H409.15l32.3 32H608v320H32V160h104l-18-18.12A73.25 73.25 0 01107.13 128H32a32 32 0 00-32 32v320a32 32 0 0032 32h576a32 32 0 0032-32V160a32 32 0 00-32-32zM136 424h16a8 8 0 008-8v-16.12c23.62-.63 42.67-20.54 42.67-45.07 0-20-13-37.81-31.58-43.39l-45-13.5c-5.16-1.54-8.77-6.78-8.77-12.73 0-7.27 5.29-13.19 11.79-13.19h28.11a24 24 0 0112.82 3.72 8.21 8.21 0 0010.13-.73l11.75-11.21a8 8 0 00-.57-12.14A57.15 57.15 0 00160 240.29V224a8 8 0 00-8-8h-16a8 8 0 00-8 8v16.12c-23.62.63-42.67 20.55-42.67 45.07 0 20 13 37.81 31.58 43.39l45 13.5c5.16 1.54 8.77 6.78 8.77 12.73 0 7.27-5.29 13.19-11.79 13.19h-28.12a24.08 24.08 0 01-12.77-3.72 8.21 8.21 0 00-10.13.73l-11.8 11.21a8 8 0 00.57 12.14A57.23 57.23 0 00128 399.71V416a8 8 0 008 8z"></path>
              </svg>
            </span>
          </div>
          <div class="c-card__body">
            <p><a href="#" class="styled-link o-cover-link__overlay">Careers</a></p>
          </div>
        </div>
        ...
        <!-- optional horizontal rule when using optional paragraph -->
        <hr class="u-w-100 u-m-t">
        <!-- optional paragraph text -->
        <p class="c-quick-link--gallery__body u-m-0">Have a question about COVID-19? View <a href="#" class="styled-link">our latest updates</a> on what you need to know about COVID-19.</p>
      </div>
    </div>