https://
The https:// in the address bar means your information is encrypted and can not be accessed by anyone else
.gov
Only government entities in the U.S. can end in .gov
Digital Standards

Cards

A card serves as an entry point to more detailed information. The type of card depends on the use case.

  1. Call to action: Used to highlight other websites where more information about a topic can be found.
  2. Summary: Used to provide more information about a page before a clickthrough.

Implementation

Cards are a way to feature a link or a set of links in a section. Card types have different markup requirements and should not be mixed. Regardless of the card type, use a maximum of three cards in a row.

Call to action cards

A call to action card must contain an icon relating to the topic of the card, a title, and a short description. This is the only card type that should link to off-site content.

Apply the card--action class and the base card class to an <a> tag.

Summary cards

Summary cards are used to display more information about a page within a site section. They must contain a heading and a short description.

Apply the card--summary class and the base card class to an <a> tag.

<h3>Call to action cards</h3>
<div class="row equal-height">
    <div class="medium-12 columns end">
        <a href="http://philaliteracy.org" class="card card--action equal">
            <header>
                <span class="fa-stack fa-4x center" aria-hidden="true">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-link fa-stack-1x fa-inverse"></i>
                </span>
                <h3>Adult learning: GED or ESL support</h3>
            </header>
            <hr class="mll mrl">
            <div class="content-block">
                <p>The Office of Adult Education helps adults in Philadelphia get the education they need for work, family, and civic engagement.</p>
            </div>
        </a>
    </div>
    <div class="medium-12 columns end">
        <a href="http://philaliteracy.org" class="card card--action equal">
            <header>
                <span class="fa-stack fa-4x center" aria-hidden="true">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-link fa-stack-1x fa-inverse"></i>
                </span>
                <h3>KEYSPOTS: Free computer access</h3>
            </header>
            <hr class="mll mrl">
            <div class="content-block">
                <p>Free computer use, Internet access, and training are available at dozens of KEYSPOT locations across the city.</p>
            </div>
        </a>
    </div>
</div>

<h3>Overview cards</h3>
<div class="row equal-height">
    <div class="small-24 medium-8 column end">
        <a href="https://phila.gov/services/business-self-employment/apply-for-a-trade-license/" class="card card--overview equal">
            <div class="content-block">
                <h3>Apply for a trade license</h3>
                <p>Identifying and getting the necessary trade license to do business in Philadelphia.</p>
            </div>
        </a>
    </div>
    <div class="small-24 medium-8 column end">
        <a href="https://phila.gov/services/business-self-employment/apply-for-a-trade-license/" class="card card--overview equal">
            <div class="content-block">
                <h3>Business taxes</h3>
                <p>Tax types and requirements for businesses that are located or operate in Philadelphia.</p>
            </div>
        </a>
    </div>
    <div class="small-24 medium-8 column end">
        <a href="https://phila.gov/services/business-self-employment/apply-for-a-trade-license/" class="card card--overview equal">
            <div class="content-block">
                <h3>Find out what license you need for your business</h3>
                <p>Information and tools to help you determine which licenses and permits you need for your business.</p>
            </div>
        </a>
    </div>
</div>