Service Tiles

The service tile group is a module that is experimental and will have more documentation coming soon. You can view the structure markup of the service-group.html file located in the sample folder. The key element of using this module is to ensure that each tile id corresponds to the appropreate panel id. For example the service tile <div tabindex="5" class="service-tile" data-tile-id="panel-5"> corresponds to and uses the <div class="service-tile-panel" data-tile-id="panel-5"> panel.

Find a Traffic School

Register Your Car

Find a Job

Find a State Park

File for Paid Family Leave

File for Unemployment

Find More State Services

Find a Traffic School

Department of Motor Vehicles (DMV)

See Details Locations Near You FAQ's

General Information: (916)323-5400
Hearing Impaired: (916)323-5400
Fax (916)323-5400

Register Your Car

Department of Motor Vehicles (DMV)

See Details Locations Near You FAQ's

General Information: (916)323-5400
Hearing Impaired: (916)323-5400
Fax (916)323-5400

Find a Job

Department of Motor Vehicles (DMV)

See Details Locations Near You FAQ's

General Information: (916)323-5400
Hearing Impaired: (916)323-5400
Fax (916)323-5400

Find a State Park

Department of Parks and Recreation (PARKS)

See Details Locations Near You FAQ's

Find a State Park near you via the Parks and Recreation website. You can search by name, feature, region, city, county, of alphabetically.

General Information: 1 (800) 777-0369
Hearing Impaired: (916) 323-5400
Fax (916)323-5400

File for Paid Family Leave

Employment Development Department (EDD)

See Details Locations Near You FAQ's

California State provides Paid Family Leave (PFL) wage replacement benefits to eligible workers who need time off work. You may be eligible for DI if you are unable to work due to pregnancy or childbirth.

General Information: 877-238-4373

File for Unemployment

Employment Development Department (EDD)

See Details Locations Near You FAQ's

This is an online service offered by the Employment Development Department (EDD). It is a fast, convenient, and secure way for customers to file and manage claims.

General Information: 877-238-4373

More Services

Source Code:

<div tabindex="0" class="service-tile" data-tile-id="panel-1" style="background-image:url(/sample/images/service-tiles/driving-test.jpg); background-size: cover;">

<div class="teaser">

<h4 class="title">Find a Traffic School</h4>

</div>

</div>

<div tabindex="0" class="service-tile" data-tile-id="panel-2" style="background-image:url(/sample/images/service-tiles/student-driver.jpg); background-size: cover;">

<div class="teaser">

<h4 class="title">Register Your Car</h4>

</div>

</div>

<div tabindex="0" class="service-tile" data-tile-id="panel-3" style="background-image:url(/sample/images/service-tiles/service-find-job.jpg); background-size: cover;">
    <div class="teaser">
        <h4 class="title">Find a Job</h4>
    </div>
</div>

<div tabindex="0" class="service-tile" data-tile-id="panel-4" style="background-image:url(/sample/images/service-tiles/redwoods.jpg); background-size: cover;">
    <div class="teaser">
        <h4 class="title">Find a State Park</h4>
    </div>
</div>

<div tabindex="0" class="service-tile" data-tile-id="panel-5" style="background-image:url(/sample/images/service-tiles/service-paid-family-leave.jpg); background-size: cover;">
    <div class="teaser">
        <h4 class="title">File for Paid Family Leave</h4>
    </div>
</div>

<div tabindex="0" class="service-tile" data-tile-id="panel-6" style="background-image:url(/sample/images/service-tiles/service-file-unemployment.jpg); background-size: cover;">
    <div class="teaser">
        <h4 class="title">File for Unemployment</h4>
    </div>
</div>

<div tabindex="0" class="service-tile service-tile-empty half" data-url="/sample/service-group.html"  >
    <span class="ca-gov-icon-gears"></span>
    <div class="teaser">
        <h4 class="title">Find More State Services</h4>
    </div>
</div>

<div class="service-tile-panel" data-tile-id="panel-1" >
        <div class="section section-default">
            <div class="container">
                <div class="card card-block">
                    <button type="button" class="close btn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <div class="group">
                        <div class="two-thirds">
                            <h1 class="m-y-0 ">Find a Traffic School</h1>
                            <p class="lead"><a href="">Department of Motor Vehicles (DMV)</a></p>

<div class="btn-row m-b">
                                <a href="/profile-landing.html" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-info"></span> See Details</a>
                                <a href="/profile-landing.html#locations-near-you" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-location"></span> Locations Near You</a>
                                <a href="/profile-landing.html#frequently-asked-questions" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-question"></span> FAQ's</a>
                            </div>

<div class="location" itemscope itemtype="http://schema.org/Organization">
                                <meta itemprop="name" content="Organization Name Here">
                                <p class="other">
                                    General Information: <span itemprop="telephone">(916)323-5400</span><br>
                                    Hearing Impaired: <span itemprop="telephone">(916)323-5400</span><br>
                                    Fax <span itemprop="faxNumber">(916)323-5400</span><br>
                                </p>
                            </div>

<div class="related-services m-t btn-row">
                                <a href="" class="btn btn-default btn-xs">Renew Driver License</a>
                                <a href="" class="btn btn-default btn-xs">Renew Vehicle Registration</a>
                                <a href="" class="btn btn-default btn-xs">Release of Liability</a>
                                <a href="" class="btn btn-default btn-xs">Name Change</a>
                            </div>

<ul class="list-inline list-unstyled m-t-md">
                                <li><a href=""><span class="ca-gov-icon-twitter" aria-hidden="true"><span class="sr-only">Twitter</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-facebook" aria-hidden="true"><span class="sr-only">Facebook</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-google-plus" aria-hidden="true"><span class="sr-only">Google+</span></span></a></li>
                            </ul>
                        </div>

<div class="third text-center">
                            <img src="/sample/images/logo-dmv.png" class="img-responsive m-t-md hidden-xs" alt="Department of Motor Vehicles">
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<div class="service-tile-panel" data-tile-id="panel-2" >
        <div class="section section-default">
            <div class="container">
                <div class="card card-block">
                <button type="button" class="close btn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <div class="group">

<div class="two-thirds">
                            <h1 class="m-y-0 ">Register Your Car</h1>
                            <p class="lead"><a href="">Department of Motor Vehicles (DMV)</a></p>

<div class="btn-row m-b">
                                <a href="/profile-landing.html" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-info"></span> See Details</a>
                                <a href="/profile-landing.html#locations-near-you" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-location"></span> Locations Near You</a>
                                <a href="/profile-landing.html#frequently-asked-questions" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-question"></span> FAQ's</a>
                            </div>

<div class="location" itemscope itemtype="http://schema.org/Organization">
                                <meta itemprop="name" content="Organization Name Here">
                                <p class="other">
                                    General Information: <span itemprop="telephone">(916)323-5400</span><br>
                                    Hearing Impaired: <span itemprop="telephone">(916)323-5400</span><br>
                                    Fax <span itemprop="faxNumber">(916)323-5400</span><br>
                                </p>
                            </div>

<div class="related-services m-t btn-row">
                                <a href="" class="btn btn-default btn-xs">Renew Driver License</a>
                                <a href="" class="btn btn-default btn-xs">Renew Vehicle Registration</a>
                                <a href="" class="btn btn-default btn-xs">Release of Liability</a>
                                <a href="" class="btn btn-default btn-xs">Name Change</a>
                            </div>

<ul class="list-inline list-unstyled m-t-md">
                                <li><a href=""><span class="ca-gov-icon-twitter" aria-hidden="true"><span class="sr-only">Twitter</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-facebook" aria-hidden="true"><span class="sr-only">Facebook</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-google-plus" aria-hidden="true"><span class="sr-only">Google+</span></span></a></li>
                            </ul>
                        </div>

<div class="third text-center">
                            <img src="/sample/images/logo-dmv.png" class="img-responsive m-t-md" alt="Department of Motor Vehicles">
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<div class="service-tile-panel" data-tile-id="panel-3" >
        <div class="section section-default">
            <div class="container">
                <div class="card card-block">
                <button type="button" class="close btn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <div class="group">

<div class="two-thirds">
                            <h1 class="m-y-0 ">Find a Job</h1>
                            <p class="lead"><a href="">Department of Motor Vehicles (DMV)</a></p>

<div class="btn-row m-b">
                                <a href="/profile-landing.html" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-info"></span> See Details</a>
                                <a href="/profile-landing.html#locations-near-you" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-location"></span> Locations Near You</a>
                                <a href="/profile-landing.html#frequently-asked-questions" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-question"></span> FAQ's</a>
                            </div>

<div class="location" itemscope itemtype="http://schema.org/Organization">
                                <meta itemprop="name" content="Organization Name Here">
                                <p class="other">
                                    General Information: <span itemprop="telephone">(916)323-5400</span><br>
                                    Hearing Impaired: <span itemprop="telephone">(916)323-5400</span><br>
                                    Fax <span itemprop="faxNumber">(916)323-5400</span><br>
                                </p>
                            </div>

<div class="related-services m-t btn-row">
                                <a href="" class="btn btn-default btn-xs">Renew Driver License</a>
                                <a href="" class="btn btn-default btn-xs">Renew Vehicle Registration</a>
                                <a href="" class="btn btn-default btn-xs">Release of Liability</a>
                                <a href="" class="btn btn-default btn-xs">Name Change</a>
                            </div>

<ul class="list-inline list-unstyled m-t-md">
                                <li><a href=""><span class="ca-gov-icon-twitter" aria-hidden="true"><span class="sr-only">Twitter</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-facebook" aria-hidden="true"><span class="sr-only">Facebook</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-google-plus" aria-hidden="true"><span class="sr-only">Google+</span></span></a></li>
                            </ul>
                        </div>

<div class="third text-center">
                            <img src="/sample/images/logo-calhr.png" class="img-responsive m-t-md" alt="Department of Motor Vehicles">
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<div class="service-tile-panel" data-tile-id="panel-4" >
        <div class="section section-default">
            <div class="container">
                <div class="card card-block">
                <button type="button" class="close btn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <div class="group">

<div class="two-thirds">
                          <h1 class="m-y-0 ">Find a State Park</h1>
                            <p class="lead"><a href="http://ca.gov/Agencies/Parks-and-Recreation-Department-of">Department of Parks and Recreation (PARKS)</a><a href=""></a></p>

<div class="btn-row m-b">
                                <a href="/profile-landing.html" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-info"></span> See Details</a>
                                <a href="/profile-landing.html#locations-near-you" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-location"></span> Locations Near You</a>
                                <a href="/profile-landing.html#frequently-asked-questions" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-question"></span> FAQ's</a>
                            </div>

<div class="location" itemscope itemtype="http://schema.org/Organization">
                                <meta itemprop="name" content="Organization Name Here">
                              <p class="other">Find a State Park near you via the Parks and Recreation website. You can search by name, feature, region, city, county, of alphabetically.</p>
                              <p class="other">General Information: 1 (800) 777-0369<br>
                                    Hearing Impaired: <span itemprop="telephone">(916) 323-5400</span><br>
                                    Fax <span itemprop="faxNumber">(916)323-5400</span><br>
                                </p>
                            </div>

<div class="related-services m-t btn-row">
                            <a href="" class="btn btn-default btn-xs">Make a Camping Reservation</a></div>

<ul class="list-inline list-unstyled m-t-md">
                                <li><a href=""><span class="ca-gov-icon-twitter" aria-hidden="true"><span class="sr-only">Twitter</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-facebook" aria-hidden="true"><span class="sr-only">Facebook</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-google-plus" aria-hidden="true"><span class="sr-only">Google+</span></span></a></li>
                            </ul>
                        </div>

<div class="third text-center">
                            <img src="/sample/images/logo-PARKS.png" class="img-responsive m-t-md" alt="Department of Motor Vehicles">
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<div class="service-tile-panel" data-tile-id="panel-5" >
        <div class="section section-default">
            <div class="container">
                <div class="card card-block">
                <button type="button" class="close btn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <div class="group">

<div class="two-thirds">
                          <h1 class="m-y-0 ">File for Paid Family Leave</h1>
                            <p class="lead"><a href="http://ca.gov/Agencies/Employment-Development-Department">Employment Development Department (EDD)</a><a href=""></a></p>

<div class="btn-row m-b">
                                <a href="/profile-landing.html" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-info"></span> See Details</a>
                                <a href="/profile-landing.html#locations-near-you" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-location"></span> Locations Near You</a>
                                <a href="/profile-landing.html#frequently-asked-questions" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-question"></span> FAQ's</a>
                            </div>

<div class="location" itemscope itemtype="http://schema.org/Organization">
                                <meta itemprop="name" content="Organization Name Here">
                              <p class="other">California State provides Paid Family Leave (PFL) wage replacement benefits to eligible workers who need time off work. You may be eligible for DI if you are unable to work due to pregnancy or childbirth. </p>
                                <p class="other">General Information: <span itemprop="telephone">877-238-4373</span><br>
                                </p>
                            </div>

<div class="related-services m-t btn-row">
                                <a href="" class="btn btn-default btn-xs">Renew Driver License</a>
                                <a href="" class="btn btn-default btn-xs">Renew Vehicle Registration</a>
                                <a href="" class="btn btn-default btn-xs">Release of Liability</a>
                                <a href="" class="btn btn-default btn-xs">Name Change</a>
                            </div>

<ul class="list-inline list-unstyled m-t-md">
                                <li><a href=""><span class="ca-gov-icon-twitter" aria-hidden="true"><span class="sr-only">Twitter</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-facebook" aria-hidden="true"><span class="sr-only">Facebook</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-google-plus" aria-hidden="true"><span class="sr-only">Google+</span></span></a></li>
                            </ul>
                        </div>

<div class="third text-center">
                            <img src="/sample/images/logo-EDD.png" class="img-responsive m-t-md" alt="Department of Motor Vehicles">
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<div class="service-tile-panel" data-tile-id="panel-6" >
        <div class="section section-default">
            <div class="container">
                <div class="card card-block">
                <button type="button" class="close btn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <div class="group">

<div class="two-thirds">
                          <h1 class="m-y-0 ">File for Unemployment</h1>
                            <p class="lead"><a href="http://ca.gov/Agencies/Employment-Development-Department">Employment Development Department (EDD)</a><a href=""></a></p>

<div class="btn-row m-b">
                                <a href="/profile-landing.html" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-info"></span> See Details</a>
                                <a href="/profile-landing.html#locations-near-you" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-location"></span> Locations Near You</a>
                                <a href="/profile-landing.html#frequently-asked-questions" class="btn btn-default btn-block-xs"><span class="ca-gov-icon-question"></span> FAQ's</a>
                            </div>

<div class="location" itemscope itemtype="http://schema.org/Organization">
                                <meta itemprop="name" content="Organization Name Here">
                              <p class="other">This is an online service offered by the Employment Development Department (EDD). It is a fast, convenient, and secure way for customers to file and manage claims.                              </p>
                              <p class="other">General Information: <span itemprop="telephone">877-238-4373</span><br>
                              </p>
                            </div>

<div class="related-services m-t btn-row">
                                <a href="" class="btn btn-default btn-xs">Renew Driver License</a>
                                <a href="" class="btn btn-default btn-xs">Renew Vehicle Registration</a>
                                <a href="" class="btn btn-default btn-xs">Release of Liability</a>
                                <a href="" class="btn btn-default btn-xs">Name Change</a>
                            </div>

<ul class="list-inline list-unstyled m-t-md">
                                <li><a href=""><span class="ca-gov-icon-twitter" aria-hidden="true"><span class="sr-only">Twitter</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-facebook" aria-hidden="true"><span class="sr-only">Facebook</span></span></a></li>
                                <li><a href=""><span class="ca-gov-icon-google-plus" aria-hidden="true"><span class="sr-only">Google+</span></span></a></li>
                            </ul>
                        </div>

<div class="third text-center">
                            <img src="/sample/images/logo-EDD.png" class="img-responsive m-t-md" alt="Department of Motor Vehicles">
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>