Loyal Rescue · Pattern library

The modular typography uses a system generated by Typografier. There are multiple sizes and spacing classes available—all based on the font-size and line-height to create a harmonious vertical rhythm. See the documentation for all available classes.

Typografier generates font-sizes and line-heights for different screen widths that are more appropriate for the available space.

The vertical spacing classes generated by Typografier provide a range of different sizes for both top & bottom padding and bottom margins. These same sizes would be applied to the island classes.

The horizontal spacing classes generated by Typografier provide range of different sizes for left & right padding. These same sizes would be applied to the island classes.

There are multiple font-sizes available based on a typographic scale. The font-sizes and line-heights increase as the screen gets wider to better use the available space.

The grids generated by Gridifier provide an array of sizing options—with explicit classes—for each major breakpoint. See the documentation for all available classes.

Modulifier generates a series of simple, default CSS components that can be used throughout the site, or as basic building blocks for more complex patterns. See the documentation for all available classes.

The list group system provides two classes: one for a vertical, stacking group of list items; and another for a horizontal, side-by-side group of list items.

Embed containers should be used for all content images, enforcing aspect ratios but also giving browsers a placeholder for the graphic before it loads to prevent unnecessary text reflows.

A simple pattern that provides and image beside some text—good for comments with avatars and many other situations. Will usually be combined into larger patterns.

The sprite sheet contains the following icons that are available for use in the website. Combine the icons with Modulifier classes for lots of variability. See the documentation for all available classes.

The billboard is used to provide visual context for inside pages. The billboard should be used directly the sub navigation and feature a photo and heading that is relevant to the page.

The hero banner is the first visual a visitor encounters on the site. The hero banner's purpose is to promote and direct users to important inside pages. Use this banner on the homepage directly under the main navigation.

There are two standard types of buttons:

Important button. Use important buttons to emphasize important action functions like the "Submit" button on an application. There should rarely be more than two important buttons on a single page. The small important button is for use in the sub navigation.
Subtle button. The Subtle button is the most commonly used button style Use them to help guide users to learn or view more without obtruding their experience. The large subtle button should be used for banners.

Cards are simple, imformative, and easy to incorporate into any page.

The icon card is used to promote helpful links. These cards work well in a grid of four and provide users a quick and easy way to navigate to various inside pages.

Info cards should be used to display dogs and their basic information. These cards link the user to the chosen dog's profile page where they can learn more details and initiate the adoption process.

The footer is found at the bottom of every page and is used to store the breadcrumbs navigation, basic contact information, and legal content.

<footer class="footer pad-t pad-b " role="contentinfo">
  <div class="wrapper gutter">
    <div class="micro">
      <nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
        <ol class="list-group-inline">
          <li class="push-r-1-4">
            <a class="breadcrumbs-link ib" href="#">
                <i class="icon i-32 breadcrumbs-logo">
                  <svg><use xlink:href="../../images/icons.svg#logo"/></svg>
                </i>
                <span class="visually-hidden">Loyal Rescue</span>
              </a>
          </li>
          <li class="push-r-1-4">
            <i class="icon i-breadcrumb push-r-1-4">
                <svg class="i-breadcrumb"><use xlink:href="../../images/icons.svg#arrow-ultralight"/></svg>
              </i>
            <a class="breadcrumbs-link" href="#">Adopt</a>
          </li>
          <li class="push-r-1-4">
            <i class="icon i-breadcrumb push-r-1-4">
                <svg><use xlink:href="../../images/icons.svg#arrow-ultralight"/></svg>
              </i>
            <a class="breadcrumbs-link" href="#">Adoption Process</a>
          </li>
        </ol>
      </nav>
      <p class="footer-contact pad-b-1-2 push-1-2">Questions, comments, or concerns: Call <a>705-772-4916</a>, email <a href="mailto:info@loyalrescue.com.">info@loyalrescue.com</a>, or visit us on social media.</p>
      <div class="grid">
        <div class="footer-copyright unit [ xs-1 s-1-2 ] push-1-2">Copyright © 2017 Loyal Rescue Inc. All rights reserved.</div>
        <div class="footer-social-wrapper unit [ xs-1 s-1-2 ]">
          <div class="footer-social ib push-r-1-2">
            <a class="ib icon-link" href="">
                <i class="icon i-16">
                  <svg><use xlink:href="../../images/icons.svg#facebook"/></svg>
                </i>
              </a>
          </div>
          <div class="footer-social ib">
            <a class="ib icon-link" href="">
                <i class="icon i-16">
                  <svg><use xlink:href="../../images/icons.svg#twitter"/></svg>
                </i>
              </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

Forms can be daunting but they are a crucial step in the adoption process. These form elements carry a subtle and refined design that help create a more pleasant experience for users as they fill out the application.

Basic inputs are used for simple, short, and single-line text inputs.

Checkboxes allow a selection of multiple items out of a few possibilities.

Radio buttons allow users to select a single option out of many, similar to a select box.

Select boxes allow a user to pick one of many options.

Text areas are similar to basic inputs but they allows multiple lines and longer text.

The header is the face of the website. It is the very first thing the user sees and interacts with when they visit. Aside from housing the main navigation, the header features a prominent hero banner with a call-to-action. The header is reserved for the top of the home page for navigation and to promote important news, inside pages, and actions.

<header role="banner">
  <div class="nav-container absolute w-1 zindex-2">
    <div class="logo-wrapper-xs unit-s-hidden text-center">
      <a class="mainnav-link-logo gutter-1-2 ib" href="#">
        <h1 class="logo logo-xs push-0 ir">Loyal Rescue</h1>
      </a>
    </div>
    <div class="wrapper">
      <input class="mainnav-check absolute" type="checkbox" id="mainnav-check">
      <label class="mainnav-label absolute pin-tl" for="mainnav-check">
        <span class="mainnav-icon mainnav-icon-top block absolute"></span>
        <span class="mainnav-icon mainnav-icon-bottom block absolute"></span>
      </label>
      <nav role="navigation" class="mainnav" id="mainnav">
        <ul class="mainnav-link-group grid grid-middle list-group milli gutter-2 pad-t-1-2 pad-b">
          <li class="unit [ s-2-7 ] unit-xs-hidden logo-wrapper"><a class="mainnav-link-logo logo-wrapper gutter-1-2 ib" href="#"><h1 class="logo milli push-0 ib ir">Loyal Rescue</h1></a></li>
          <li class="unit [ xs-1 s-1-7 ] mainnav-link-border"><a class="mainnav-link block pad-t-1-2 pad-b-1-2" href="#">Adopt</a></li>
          <li class="unit [ xs-1 s-1-7 ] mainnav-link-border"><a class="mainnav-link block pad-t-1-2 pad-b-1-2" href="#">Foster</a></li>
          <li class="unit [ xs-1 s-1-7 ] mainnav-link-border"><a class="mainnav-link block pad-t-1-2 pad-b-1-2" href="#">About</a></li>
          <li class="unit [ xs-1 s-1-7 ] mainnav-link-border"><a class="mainnav-link block pad-t-1-2 pad-b-1-2" href="#">Blog</a></li>
          <li class="unit [ xs-1 s-1-7 ]"><a class="mainnav-link block pad-t-1-2 pad-b-1-2" href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="hero-container">
    <a class="hero-link block w-1 h-1 icon-link relative" href="#">
      <div class="hero-content center-contents text-center pad-t-2">
        <h2 class="exa push-1-4 block gutter">Find your perfect companion.</h2>
        <div class="btn btn-subtle btn-subtle-large giga">
          <span class="icon-text">View available dogs</span>
          <i class="icon i-arrow">
              <svg><use xlink:href="../../images/icons.svg#arrow-light"/></svg>
            </i>
        </div>
      </div>
      <span class="hero-image absolute pin-bl pin-br push-0"></span>
    </a>
  </div>
</header>

Navigations are the backbone to large websites. They provide various functionality and come in all shapes and sizes.

Breadcrumbs provide context to users as they browse and allow them to retrace their steps. Breadcrumbs are placed in the footer to avoid conflicting with the main and sub navigations.

The filter allows users to more specifically browse through Loyal Rescue's available dogs. Place the filter directly above the available dogs section.

<div class="filter-container">
  <div class="wrapper">
    <input id="filter-check" type="checkbox" class="filter-check absolute">
    <label for="filter-check" class="filter-label w-1 pad-t pad-b gutter">
      <i class="icon i-16 push-r-1-4">
          <svg><use xlink:href="../../images/icons.svg#filter"/></svg>
        </i>
      <span class="icon-label milli">Filter:</span>
    </label>
    <div class="filters grid grid-middle gutter pad-t-1-2 pad-b" id="filters">
      <div class="filter-item filter-item-border unit xs-1 s-1-4 pad-t-1-2 pad-b-1-2">
        <label class="filter-item-label bold milli push-1-8" for="species">Species</label>
        <select class="filter-select milli" id="species">
          <option>All</option>
          <option>Dog</option>
          <option>Cat</option>
        </select>
      </div>
      <div class="filter-item filter-item-border unit xs-1 s-1-4 pad-t-1-2 pad-b-1-2">
        <label class="filter-item-label bold milli push-1-8" for="breed">Breed</label>
        <select class="filter-select milli" id="breed">
          <option>All</option>
          <option>Boxer</option>
          <option>Dog</option>
        </select>
      </div>
      <div class="filter-item filter-item-border unit xs-1 s-1-4 pad-t-1-2 pad-b-1-2">
        <label class="filter-item-label bold milli push-1-8" for="age">Age</label>
        <select class="filter-select milli" id="age">
          <option>All</option>
          <option>Baby</option>
          <option>Young</option>
          <option>Adult</option>
          <option>Senior</option>
        </select>
      </div>
      <div class="filter-item unit xs-1 s-1-4 pad-t-1-2 pad-b-1-2">
        <label class="filter-item-label bold milli push-1-8" for="sex">Sex</label>
        <select class="filter-select milli" id="sex">
          <option>All</option>
          <option>Male</option>
          <option>Female</option>
        </select>
      </div>
    </div>
  </div>
</div>

The main navigation is used at the top of every page. It drives users to the various inside pages and is used to express the Loyal Rescue brand.

The search bar allows users to search the entire Loyal Rescue website and get to where they want to go faster. The search bar can be integrated into the main navigation or used on it's own.

The sub navigation is used to jump between pages that categorically fall under the same main section.

The tab navigation is used to denote progress-based or tab-based actions. Use this navigation to break long application forms into manageable pieces.

Sections are used to display information as well as act as secondary navigation driving people to specific locations.

This section can hold a lot of content, yet stay compact thanks to its accordion-style functionality. This section should be placed at the bottom of pages that need to store a lot of information in an organized and clutter-free manner.

<section class="accordion pad-b" id="accordion">
  <div class="wrapper gutter">

    <div class="accordion-header">
      <h2 class="pad-t-2 pad-b-2 push-0">Frequently Asked Questions</h2>
    </div>

    <div class="accordion-content">
      <input class="q1-check" type="checkbox" id="q1-check">
      <input class="q2-check" type="checkbox" id="q2-check">
      <input class="q3-check" type="checkbox" id="q3-check">
      <ul class="accordion-list list-group push-0">
        <li class="accordion-list-item">
          <div class="accordion-question-container">
            <h3 class="kilo push-0 pad-t pad-b">
                <label class="accordion-btn pad-t-1-8 pad-b-1-8 relative" for="q1-check">
                  <span class="accordion-question ib">Why is there an adoption fee?</span>
                  <span class="accordion-toggle pin-rt">
                    <i class="accordion-icon icon i-16 valign-middle" id="q1-icon">
                      <svg><use xlink:href="../../images/icons.svg#more"/></svg>
                    </i>
                  </span>
                </label>
              </h3>
          </div>
          <div class="accordion-answer max-length-no-center push-2" id="q1-answer">
            <p class="push-0">The sad reality is that we get the unwanted, unvetted, uncared for. We have had, and still have many adult dogs, most of whom came to us in need of medical care. Veterinary costs for the special cases can run into thousands of dollars. Some of the dogs have special needs like medications such as insulin for diabetes, Vetoryl for Cushings disease and heart medications for those that have heart issues in order to provide a better quality of life. Younger healthier dogs may not have quite the same health issues as the older dogs do but they too need to be examined, vaccinated and altered prior to adoption. They could also have problems like eye surgery, lump removals, diabetic. The adoption fee only partially covers these costs. Donations from the public are limited. LOYAL Rescue offsets the difference through fundraising efforts where we can.</p>
          </div>
        </li>
        <li class="accordion-list-item">
          <div class="accordion-question-container">
            <h3 class="kilo push-0 pad-t pad-b">
                <label class="accordion-btn pad-t-1-8 pad-b-1-8 relative" for="q2-check">
                  <span class="accordion-question ib">What will my newly adopted dog come with?</span>
                  <span class="accordion-toggle pin-rt">
                    <i class="accordion-icon icon i-16 valign-middle" id="q2-icon">
                      <svg><use xlink:href="../../images/icons.svg#more"/></svg>
                    </i>
                  </span>
                </label>
              </h3>
          </div>
          <div class="accordion-answer max-length-no-center push-2" id="q2-answer">
            <p>Often dogs come into our foster program with nothing but the fur on their backs; they do not have their own collar, leash, ID, toys, or bed. Other times a dog may come in with a lot of belongings. When you adopt your new dog, it will come with its vetting paperwork. Often a foster home will send a loved toy or bed along with the dog depending on how long it has been in foster care. You should be prepared to bring the following with you at the time of adoption: a secure, tight fitting collar (we recommend martingale collars), a sturdy leash, ID tags with your information on them to immediately put on the dog's collar, and, if required, a crate for transporting. What you choose to buy for your new family member beyond that in terms of toys, clothing, bedding, etc. is totally up to you, and their foster home will let you know what the dog prefers in terms of these items. They will likely also send you home with a bit of food that the dog has been eating in order to transition him/her onto the food you plan to feed, assuming that it is not the same brand. This transition is important to avoid stomach problems for your new pooch.</p>

            <p class="push-1-2">All questions regarding the dog's likes, dislikes and preferences, as well as what you should purchase and bring with you at the time of adoption, can be discussed with the foster family. The one essential item that is non-negotiable, however, is a tight-fitting collar with ID tags (including the ID tag that will come with your LOYAL dog and that should remain on him or her at all times). Dogs have been known to startle and go missing on the day of adoption or in the following days, and having a tight-fitting collar with ID (at a bare minimum, the LOYAL ID tag) on it is imperative and non-negotiable. You will not be permitted to take a dog home that is not wearing proper ID.</p>
          </div>
        </li>
        <li class="accordion-list-item">
          <div class="accordion-question-container">
            <h3 class="kilo push-0 pad-t pad-b">
                <label class="accordion-btn pad-t-1-8 pad-b-1-8 relative" for="q3-check">
                  <span class="accordion-question ib">Can I come visit a dog?</span>
                  <span class="accordion-toggle pin-rt">
                    <i class="accordion-icon icon i-16 valign-middle" id="q3-icon">
                      <svg><use xlink:href="../../images/icons.svg#more"/></svg>
                    </i>
                  </span>
                </label>
              </h3>
          </div>
          <div class="accordion-answer max-length-no-center push-2" id="q3-answer">
            <p>Since we are provincially-based, that means our dogs may be fostered anywhere in Ontario, so please check their profiles as to the location of their foster home.</p>
            <p>We are not a shelter, and therefore do not have one location where dogs can be visited, viewed and adopted.</p>
            <p class="push-1-2">If you are interested in meeting one of our adoptable dogs, please complete an application on our website to begin our adoption process. Only approved homes can make arrangements with our foster homes to meet our dogs in person, unless you have spoken to the foster family and made alternative arrangements.</p>
          </div>
        </li>
      </ul>
    </div>

  </div>
</section>

The carousel is a great way of displaying a gallery of images. This section can be used on a dog's personal page to display photos or embeded in the overview-section to display relevant photos.

<section class="island-1-2">
  <div class="section-card pad-t-2 pad-b-2 gutter content-fill">
    <div class="carousel w-1 max-length">
      <input class="carousel-input" type="radio" name="foster-carousel" id="photo1-control" checked>
      <input class="carousel-input" type="radio" name="foster-carousel" id="photo2-control">
      <input class="carousel-input" type="radio" name="foster-carousel" id="photo3-control">
      <input class="carousel-input" type="radio" name="foster-carousel" id="photo4-control">
      <input class="carousel-input" type="radio" name="foster-carousel" id="photo5-control">

      <div class="carousel-inner relative">
        <div class="carousel-items">
          <div class="carousel-item embed embed-4by3" id="photo1">
            <img class="embed-item" src="../../images/carousel/photo1.jpg" alt="">

            <label class="hide-custom-input center-content-vertical" for="photo2-control" aria-label="Next">
              <i class="icon i-48 i-carousel pin-rc push-r-1-2"><svg><use xlink:href="../../images/icons.svg#next"/></svg></i>
            </label>
          </div>
          <div class="carousel-item embed embed-4by3" id="photo2">
            <img class="embed-item" src="../../images/carousel/photo2.jpg" alt="">

            <label class="hide-custom-input center-content-vertical" for="photo1-control" aria-label="Previous">
              <i class="icon i-48 i-carousel pin-lc push-l-1-2"><svg><use xlink:href="../../images/icons.svg#previous"/></svg></i>
            </label>
            <label class="carousel-arrow hide-custom-input center-content-vertical" for="photo3-control" aria-label="Next">
              <i class="icon i-48 i-carousel pin-rc push-r-1-2"><svg><use xlink:href="../../images/icons.svg#next"/></svg></i>
            </label>
          </div>
          <div class="carousel-item embed embed-4by3" id="photo3">
            <img class="embed-item" src="../../images/carousel/photo3.jpg" alt="">

            <label class="hide-custom-input center-content-vertical" for="photo2-control" aria-label="Previous">
              <i class="icon i-48 i-carousel pin-lc push-l-1-2"><svg><use xlink:href="../../images/icons.svg#previous"/></svg></i>
            </label>
            <label class="carousel-arrow hide-custom-input center-content-vertical" for="photo4-control" aria-label="Next">
              <i class="icon i-48 i-carousel pin-rc push-r-1-2"><svg><use xlink:href="../../images/icons.svg#next"/></svg></i>
            </label>
          </div>
          <div class="carousel-item embed embed-4by3" id="photo4">
            <img class="embed-item" src="../../images/carousel/photo4.jpg" alt="">

            <label class="hide-custom-input center-content-vertical" for="photo3-control" aria-label="Previous">
              <i class="icon i-48 i-carousel pin-lc push-l-1-2"><svg><use xlink:href="../../images/icons.svg#previous"/></svg></i>
            </label>
            <label class="hide-custom-input center-content-vertical" for="photo5-control" aria-label="Next">
              <i class="icon i-48 i-carousel pin-rc push-r-1-2"><svg><use xlink:href="../../images/icons.svg#next"/></svg></i>
            </label>
          </div>
          <div class="carousel-item embed embed-4by3" id="photo5">
            <img class="embed-item" src="../../images/carousel/photo5.jpg" alt="">

            <label class="hide-custom-input center-content-vertical" for="photo4-control" aria-label="Previous">
              <i class="icon i-48 i-carousel pin-lc push-l-1-2"><svg><use xlink:href="../../images/icons.svg#previous"/></svg></i>
            </label>
          </div>
        </div>

        <ul class="carousel-controls list-group-inline absolute w-1 text-center push-0 pad-t-1-2">
          <li class="gutter-1-4">
            <label class="carousel-btn icon i-18 ir" for="photo1-control">Photo 1</label>
          </li>
          <li class="gutter-1-4">
            <label class="carousel-btn icon i-18 ir" for="photo2-control">Photo 2</label>
          </li>
          <li class="gutter-1-4">
            <label class="carousel-btn icon i-18 ir" for="photo3-control">Photo 3</label>
          </li>
          <li class="gutter-1-4">
            <label class="carousel-btn icon i-18 ir" for="photo4-control">Photo 4</label>
          </li>
          <li class="gutter-1-4">
            <label class="carousel-btn icon i-18 ir" for="photo5-control">Photo 5</label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

The details section displays specific details in a easy-to-follow and organized way. Use this section on each dog's personal page to list all of their information.

<section class="details gutter">
  <div class="details-section wrapper pad-t pad-b">
    <div class="grid">
      <div class="unit xs-1 s-1-3 pad-t pad-b push details-header">
        <h4 class="push-0">Physical</h4>
      </div>
      <div class="unit xs-1 s-2-3">
        <dl class="list-group-inline push-0">
          <dt class="push-1-2">Name:</dt>
          <dd class="push-1-2">Annabelle</dd>
          <dt class="push-1-2">Age:</dt>
          <dd class="push-1-2">10 years</dd>
          <dt class="push-1-2">Sex:</dt>
          <dd class="push-1-2">Female</dd>
          <dt class="push-1-2">Altered:</dt>
          <dd class="push-1-2">Spayed</dd>
          <dt class="push-1-2">Weight:</dt>
          <dd class="push-1-2">10.5 lbs.</dd>
          <dt class="push-0">Breed:</dt>
          <dd class="push-0">Chihuahua</dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="details-section wrapper pad-t pad-b">
    <div class="grid">
      <div class="unit xs-1 s-1-3 pad-t pad-b push details-header">
        <h4 class="push-0">Personality</h4>
      </div>
      <div class="unit xs-1 s-2-3">
        <dl class="list-group-inline push-0">
          <dt class="push-1-2">Temperament:</dt>
          <dd class="push-1-2">Loving, sociable, strong-willed</dd>
          <dt class="push-0">Energy Level:</dt>
          <dd class="push-0">Low</dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="details-section wrapper pad-t pad-b">
    <div class="grid">
      <div class="unit xs-1 s-1-3 pad-t pad-b push details-header">
        <h4 class="push-0">Adoption Details</h4>
      </div>
      <div class="unit xs-1 s-2-3">
        <dl class="list-group-inline push-0">
          <dt class="push-1-2">Foster Home:</dt>
          <dd class="push-1-2">Kanata, ON</dd>
          <dt class="push-1-2">Adoption fee:</dt>
          <dd class="push-1-2">$350</dd>
          <dt class="push-0">Requirements:</dt>
          <dd class="push-0">Owner with dog experience</dd>
        </dl>
      </div>
    </div>
  </div>
</section>

The overview section is big and bold. Use this section to highlight specific topics in an engaging and eye-catching manner.

<section class="overview-section relative">
  <span class="block section-image push-0"></span>
  <div class="absolute w-1 pin-tl">
    <div class="section-header-container wrapper">
      <div class="section-content gutter pad-t-2">
        <h2 class="section-title yotta push-0 fw-600"><span class="block push-1-2 fw-400 giga">Adopt</span>Easy as 1, 2, 3.</h2>
      </div>
    </div>
  </div>

  <div class="grid grid-stretch island-1-2">
    <section class="unit [ xs-1 s-1-2 ] unit-content-distribute island-1-2">
      <div class="section-card pad-t-2 pad-b-2 gutter content-fill">
        <div class="section-card-content max-length-no-center">
          <h3 class="fw-600 kilo">Adoption is just a few steps away.</h3>
          <p class="push-1-2">At Loyal Rescue, the adoption process is secure and easy. Complete your online application, phone interview, and home visit. Finally, if all goes well, you will be approved to adopt!</p>
          <a class="btn btn-subtle" href="#">
              <span class="icon-text">Learn more about adopting</span>
              <i class="icon i-arrow">
                <svg><use xlink:href="../../images/icons.svg#arrow"/></svg>
              </i>
            </a>
        </div>
      </div>
    </section>
    <section class="unit [ xs-1 s-1-2 ] unit-content-distribute island-1-2">
      <div class="section-card-icons pad-t-2 pad-b-2 gutter content-fill">
        <ol class="list-group-inline push-0">
          <li class="card-icon gutter-1-4">
            <h3 class="yotta fw-600 push-0">1</h3>
            <span class="card-icon-label block fw-600 milli push-0">Application</span>
          </li>
          <li class="card-icon gutter-1-4">
            <h3 class="yotta fw-600 push-0">2</h3>
            <span class="card-icon-label block fw-600 milli push-0">Approval</span>
          </li>
          <li class="card-icon gutter-1-4">
            <h3 class="yotta fw-600 push-0">3</h3>
            <span class="card-icon-label block fw-600 milli push-0">Adoption</span>
          </li>
        </ol>
      </div>
    </section>
  </div>
</section>

The post section can be used for blog entries, comments, or reviews.

This section is used to group together quick links in an organized grid. Use this section under the hero-banner on the homepage to quickly guide users to noteworthy locations.

<section class="quick-links">
  <ul class="grid grid-stretch list-group">
    <li class="unit [ xs-1 s-1-2 m-1-4 ] s-border-right">
      <a class="card basic-card icon-link block pad-t pad-b text-center" href="application.html">
        <div class="card-content">
          <i class="icon i-64 card-icon push-1-2">
              <svg><use xlink:href="../../images/icons.svg#application"/></svg>
            </i>
          <h3 class="card-title push-0 mega">Application</h3>
          <p class="push-0">Your first step to adoption.</p>
        </div>
      </a>
    </li>
    <li class="unit [ xs-1 s-1-2 m-1-4 ] m-border-right">
      <a class="card basic-card icon-link block pad-t pad-b text-center" href="#">
        <div class="card-content">
          <i class="icon i-64 card-icon push-1-2">
              <svg><use xlink:href="../../images/icons.svg#faq"/></svg>
            </i>
          <h3 class="card-title push-0 mega">FAQ</h3>
          <p class="push-0">We've got your answers!.</p>
        </div>
      </a>
    </li>
    <li class="unit [ xs-1 s-1-2 m-1-4 ] s-border-right">
      <a class="card basic-card icon-link block pad-t pad-b text-center" href="#">
        <div class="card-content">
          <i class="icon i-64 card-icon push-1-2">
              <svg><use xlink:href="../../images/icons.svg#newsletter"/></svg>
            </i>
          <h3 class="card-title push-0 mega">Newsletter</h3>
          <p class="push-0">Join our monthly newsletter.</p>
        </div>
      </a>
    </li>
    <li class="unit xs-1 s-1-2 m-1-4">
      <a class="card basic-card icon-link block pad-t pad-b text-center" href="#">
        <div class="card-content">
          <i class="icon i-64 card-icon push-1-2">
              <svg><use xlink:href="../../images/icons.svg#pet"/></svg>
            </i>
          <h3 class="card-title push-0 mega">Helping Lost Pets</h3>
          <p class="push-0">Learn the procedure.</p>
        </div>
      </a>
    </li>
  </ul>
</section>

Loyal Rescue Pattern Library

Patterns

Pages