Skip to Main Content
Warning!

This browser is not supported by the Playbook.

You should switch to a supported browser. Learn more

Toolkit
Toolkit

Lists

Lists group similar types of content together in one area of a webpage. These are the list components used in the Demos. Click on the brackets icon to the right to reveal the code that creates each list element and to see how it renders across different devices.

Action Items List

The action items list is can be used on a variety of pages to place content that a user may want to use on that page. For example, a list of related articles on the article detail page is a type of action items list.

<div class="lsc-action-items-list-container">
    <h4 class="lsc-action-items-list-header lsc-icon-articles-before">Related <span>Articles</span></h4>
    <ul class="lsc-action-items-list">
        <li class="lsc-action-item">
            <span class="lsc-related-article-date lsc-action-item-context">1/7/2017</span>
            <a href="#" class="lsc-action-item-link lsc-action-item-subject">Article Title Lorem Ipsum</a>
        </li>
        <li class="lsc-action-item">
            <span class="lsc-related-article-date lsc-action-item-context">12/12/2016</span>
            <a href="#" class="lsc-action-item-link lsc-action-item-subject">Article Title Lorem Ipsum</a>
        </li>
        <li class="lsc-action-item">
            <span class="lsc-related-article-date lsc-action-item-context">12/5/2016</span>
            <a href="#" class="lsc-action-item-link lsc-action-item-subject">Article Title Lorem Ipsum</a>
        </li>
        <li class="lsc-action-item">
            <span class="lsc-related-article-date lsc-action-item-context">11/28/2016</span>
            <a href="#" class="lsc-action-item-link lsc-action-item-subject">Article Title Lorem Ipsum</a>
        </li>
        <li class="lsc-action-item">
            <span class="lsc-related-article-date lsc-action-item-context">10/31/2016</span>
            <a href="#" class="lsc-action-item-link lsc-action-item-subject">Article Title Lorem Ipsum</a>
        </li>
    </ul>
    <a href="#" class="lsc-action-item-additional-link">View all Articles</a>
</div>

Contact List

The contact list displays contact information for the statewide website.

<div class="lsc-contact-info">
    <header class="lsc-section-header">
        <h3 class="lsc-page-subheading">Call Legal Services ABC Legal</h3>
    </header>
    <p>Our business hours are:<br />
        8am-5pm M-F EST
    </p>
    <ul class="lsc-contact-list">
        <li class="lsc-contact-option">
            <a href="#" class="lsc-contact-link">Toll Free 1-866-456-4995</a>
        </li>
        <li class="lsc-contact-option">
            <a href="#" class="lsc-contact-link">En Español 1-888-835-3505</a>
        </li>
    </ul>
</div>

The related issues list tags a page with a list of Legal Issues that relate to its content. A user can click in the list to see more content that relates to that Legal Issue.

<section class="lsc-related-issues">
    <header class="lsc-related-issues-header">
        <h2 class="lsc-page-sub-section">Related Legal Issues</h2>
    </header>
    <ul class="lsc-related-issues-list">
        <li class="lsc-related-issue">
            <a href="#" class="lsc-related-issue-link">Foster Care
                <span class="lsc-issue-article-count">(10)</span>
            </a>
        </li>
        <li class="lsc-related-issue">
            <a href="#" class="lsc-related-issue-link">Child Support
                <span class="lsc-issue-article-count">(8)</span>
            </a>
        </li>
        <li class="lsc-related-issue">
            <a href="#" class="lsc-related-issue-link">Custody &amp; Visitation
                <span class="lsc-issue-article-count">(7)</span>
            </a>
        </li>
        <li class="lsc-related-issue">
            <a href="#" class="lsc-related-issue-link">Right of Children
                <span class="lsc-issue-article-count">(4)</span>
            </a>
        </li>
        <li class="lsc-related-issue">
            <a href="#" class="lsc-related-issue-link">Child Abuse &amp; Neglect
                <span class="lsc-issue-article-count">(3)</span>
            </a>
        </li>
        <li class="lsc-related-issue">
            <a href="#" class="lsc-related-issue-link">Guardianship
                <span class="lsc-issue-article-count">(2)</span>
            </a>
        </li>
        <li class="lsc-related-issue">
            <a href="#" class="lsc-related-issue-link">Parenting Teens
                <span class="lsc-issue-article-count">(2)</span>
            </a>
        </li>
        <li class="lsc-related-issue">
            <a href="#" class="lsc-related-issue-link">Pregnant Teens
                <span class="lsc-issue-article-count">(1)</span>
            </a>
        </li>
    </ul>
</section>

Contact List

The contact list displays contact information for the statewide website.

<div class="lsc-contact-info">
    <header class="lsc-section-header">
        <h3 class="lsc-page-subheading">Call Legal Services ABC Legal</h3>
    </header>
    <p>Our business hours are:<br />
        8am-5pm M-F EST
    </p>
    <ul class="lsc-contact-list">
        <li class="lsc-contact-option">
            <a href="#" class="lsc-contact-link">Toll Free 1-866-456-4995</a>
        </li>
        <li class="lsc-contact-option">
            <a href="#" class="lsc-contact-link">En Español 1-888-835-3505</a>
        </li>
    </ul>
</div>

Results List

The results list displays a group of search results. An example of the results list is in the referral services results page.

<div class="lsc-search-results">
    <form class="lsc-results-filter">
        <p class="lsc-pagination-description">Showing 1-10 of 37</p>
        <div class="lsc-input-container lsc-select-container">
            <label for="sort-by" class="lsc-label">
                Sort By
            </label>
            <select type="text" id="sort-by" name="sort-by" class="lsc-select">
                <option selected value="relevance">Relevance</option>
                <option value="alphabetical">A - Z</option>
                <option value="distance">Closest Distance</option>
            </select>
            <span class="lsc-faux-input"></span>
        </div>
    </form>
    <ul class="lsc-results-list">
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                   Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                       Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                           Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                               Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                               Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                               Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                               Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                               Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                               Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
        <li class="lsc-results-item">
            <div class="lsc-result-tag">Family &amp; Safety</div>
            <h2 class="lsc-page-subheading"><a href="#" class="lsc-result-link">Location title lorem ipsum dolor sit amet, consectetuer</a></h2>
            <p class="lsc-result-details">100 Main Street<br />

                               Springfield, IL 12345
            </p>
            <a href="#" class="lsc-result-sublink">(888) 888-8888</a>
        </li>
    </ul>
</div>

Social media links connect users to an organization's different social media accounts.

<ul class="lsc-social-list">
    <li class="lsc-social-item">
        <a href="#" class="lsc-social-link lsc-button-tertiary lsc-button-icon lsc-icon-facebook-before"  title="Like Us on Facebook">
            <span class="lsc-accessible-text">Like Us on Facebook</span>
        </a>
    </li>
    <li class="lsc-social-item">
        <a href="#" class="lsc-social-link lsc-button-tertiary lsc-button-icon lsc-icon-twitter-before"  title="Follow Us on Twitter">
            <span class="lsc-accessible-text">Follow Us on Twitter</span>
        </a>
    </li>
    <li class="lsc-social-item">
        <a href="#" class="lsc-social-link lsc-button-tertiary lsc-button-icon lsc-icon-linkedin-before"  title="Join Us on LinkedIn">
            <span class="lsc-accessible-text">Join Us on LinkedIn</span>
        </a>
    </li>
</ul>

Stats List

The stats list displays statistics about a given page, such as the number of page views, favorites, or comments it has.

<section class="lsc-stats">
    <ul class="lsc-stat-list">
        <li class="lsc-stat lsc-icon-views-before">
            1.1K <span class="lsc-accessible-text">page views</span>
        </li>
        <li class="lsc-stat lsc-icon-likes-before">
            75 <span class="lsc-accessible-text">people like this article</span>
        </li>
        <li class="lsc-stat lsc-icon-comments-before">
            12 <span class="lsc-accessible-text">comments</span>
        </li>
    </ul>
</section>