Skip to main content
Sign In
HHS Logo
U.S. Department of Health & Human Services
Search Icon
Menu Icon

Introduction

The ASPR website was built on the Bootstrap 3.4.1 Release.

Table of Contents

Copy/Paste: Breadcrumb Component

            
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="breadcrumbs-row">
                <ul class="breadcrumbs-listing">
                    <li><a href="#">BREADCRUMB01</a></li>
                    <li><a href="#">BREADCRUMB02 (CURRENT)</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Banner Title Goes Here

Place secondary text in this paragraph tag if you need it.

Learn More

Copy/Paste: Banner Component

            
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="aspr-internal-banner border-top-brand cover mt-5 mb-5" style="background-image: url("/publishingimages/homepagebanner.png");">
                <div class="hero">
                    <h1>Banner Title Goes Here</h1>
                    <p>Place secondary text in this paragraph tag if you need it.</p>
                    <a href="###" class="btn btn-lg btn-primary" title="Descriptive Text of Link"><strong>Learn More</strong></a>
                </div>
            </div>
        </div>
    </div>
</div>

Copy/Paste: Banner (No Callout)

            
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2 id="banner-nocallout">Banner (No Callout)</h2>
            <div id="banner" style="background-image:-webkit-gradient(linear, right top, left top, from(rgba(21, 81, 151, 0.1)), to(#155197)), url("/_catalogs/masterpage/ASPR/images/ResponseOperations.png");background-size:cover;">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div>
                                <h1>TITLE GOES HERE<br></h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Button Classes

Button Text Here Button Text Here Button Text Here Button Text Here Button Text Here Button Text Here Button Text Here

Copy/Paste: Button Classes

            
<a href="#" class="btn btn-lg btn-blue" title="#">Button Text Here</a>
<a href="#" class="btn btn-lg btn-yellow" title="#">Button Text Here</a>
<a href="#" class="btn btn-lg btn-lightblue" title="#">Button Text Here</a>
<a href="#" class="btn btn-lg btn-green" title="#">Button Text Here</a>
<a href="#" class="btn btn-lg btn-red" title="#">Button Text Here</a>
<a href="#" class="btn btn-lg btn-gray" title="#">Button Text Here</a>
<a href="#" class="btn btn-lg btn-orange" title="#">Button Text Here</a>

Icon Button (Full-Width) Component

Copy/Paste: Icon Button (Full-Width) Component

            
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <ul class="list-group">
                <a href="#" target="_blank">
                    <li class="list-group-item">
                        <img src="/_catalogs/masterpage/ASPR/images/CHEMM.png" alt="" />
                        <span>TEXT GOES HERE</span>
                    </li>
                </a>
                <li class="list-group-item">
                    <img src="/_catalogs/masterpage/ASPR/images/CHEMM.png" alt="" />
                    <span>TEXT GOES HERE (NOT LINKED)</span>
                </li>
                <a href="#" target="_blank">
                    <li class="list-group-item">
                        <img src="/_catalogs/masterpage/ASPR/images/CHEMM.png" alt="" />
                        <span>TEXT GOES HERE</span>
                    </li>
                </a>
            </ul>
        </div>
    </div>
</div>

Icon Button (Half-Width) Component

Copy/Paste: Icon Button (Half-Width) Component

            
<div class="container">
    <div class="row">
        <div class="col-lg-12">
        </div>
        <div class="col-lg-6">
            <ul class="list-group">
                <a href="#" target="_blank">
                    <li class="list-group-item">
                        <img src="/_catalogs/masterpage/ASPR/images/CHEMM.png" alt="" />
                        <span>TEXT GOES HERE</span>
                    </li>
                </a>
                <li class="list-group-item">
                    <img src="/_catalogs/masterpage/ASPR/images/CHEMM.png" alt="" />
                    <span>TEXT GOES HERE (NOT LINKED)</span>
                </li>
            </ul>
        </div>
        <div class="col-lg-6">
            <ul class="list-group">
                <a href="#" target="_blank">
                    <li class="list-group-item">
                        <img src="/_catalogs/masterpage/ASPR/images/CHEMM.png" alt="" />
                        <span>TEXT GOES HERE</span>
                    </li>
                </a>
                <li class="list-group-item">
                    <img src="/_catalogs/masterpage/ASPR/images/CHEMM.png" alt="" />
                    <span>TEXT GOES HERE (NOT LINKED)</span>
                </li>
            </ul>
        </div>
    </div>
</div>

Accordion Component

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.

Copy/Paste: Accordion Component

            
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><span class="accordion-bluebox">Heading 1</span><span class="accordion-icon"><img src="/_catalogs/masterpage/ASPR/images/Heath.png" alt="" /></span> </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <p>
                                <strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="accordion-bluebox">Heading 2</span> </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            <p>
                                <strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class="accordion-text">Supplemental Text</span> </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            <p>
                                <strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingFour">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><span class="accordion-bluebox">Heading 4</span><span class="accordion-icon"><img src="/_catalogs/masterpage/ASPR/images/Heath.png" alt="" /></span><span class="accordion-text">Supplemental Text</span> </a>
                        </h4>
                    </div>
                    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
                        <div class="panel-body">
                            <p>
                                <strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Blue Box Highlight

Title Here

Put some text here. Lorem dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.

Button Text Here

Copy/Paste: Blue Box Highlight

            
<div class="aspr-lightblue-box">
    <h3 class="mt-0">Title Here</h3>
    <p>Put some text here. Lorem dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.
    </p>
    <a href="#" class="btn btn-lg btn-blue mt-2" title="#">Button Text Here</a>
</div>

Statistics (Two Col)

10
Text Goes Here

20
Text Goes Here

Copy/Paste: Statistics (Two Col)

            
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="row text-center">
                <div class="col-md-6 statistic">
                    <img src="/_catalogs/masterpage/ASPR/images/icon-02-barda.png" alt="" />
                    <p>
                        <span class="highlight">10</span><br /><strong>Text Goes Here</strong>
                    </p>
                </div>
                <div class="col-md-6 statistic">
                    <img src="/_catalogs/masterpage/ASPR/images/icon-03-cargo.png" alt="" />
                    <p>
                        <span class="highlight">20</span><br /><strong>Text Goes Here</strong>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Statistics (Three Col)

10
Text Goes Here

20
Text Goes Here

30
Text Goes Here

Copy/Paste: Statistics (Three Col)

            
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="row text-center">
                <div class="col-md-4 statistic">
                    <img src="/_catalogs/masterpage/ASPR/images/icon-02-barda.png" alt="" />
                    <p>
                        <span class="highlight">10</span><br /><strong>Text Goes Here</strong>
                    </p>
                </div>
                <div class="col-md-4 statistic">
                    <img src="/_catalogs/masterpage/ASPR/images/icon-03-cargo.png" alt="" />
                    <p>
                        <span class="highlight">20</span><br /><strong>Text Goes Here</strong>
                    </p>
                </div>
                <div class="col-md-4 statistic">
                    <img src="/_catalogs/masterpage/ASPR/images/icon-04-test.png" alt="" />
                    <p>
                        <span class="highlight">30</span><br /><strong>Text Goes Here</strong>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Statistics (Four Col)

10
Text Goes Here

20
Text Goes Here

30
Text Goes Here

30
Text Goes Here

Copy/Paste: Statistics (Four Col)

            
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="row text-center">
                <div class="col-md-3 statistic">
                    <img src="/_catalogs/masterpage/ASPR/images/icon-02-barda.png" alt="" />
                    <p>
                        <span class="highlight">10</span><br /><strong>Text Goes Here</strong>
                    </p>
                </div>
                <div class="col-md-3 statistic">
                    <img src="/_catalogs/masterpage/ASPR/images/icon-03-cargo.png" alt="" />
                    <p>
                        <span class="highlight">20</span><br /><strong>Text Goes Here</strong>
                    </p>
                </div>
                <div class="col-md-3 statistic">
                    <img src="/_catalogs/masterpage/ASPR/images/icon-04-test.png" alt="" />
                    <p>
                        <span class="highlight">30</span><br /><strong>Text Goes Here</strong>
                    </p>
                </div>
                <div class="col-md-3 statistic">
                    <img src="/_catalogs/masterpage/ASPR/images/icon-04-test.png" alt="" />
                    <p>
                        <span class="highlight">30</span><br /><strong>Text Goes Here</strong>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Tiles (Two)

TILE TITLESubcontent available here.

TILE TITLESubcontent available here.

Copy/Paste: Tiles (Two)

            
<div class="container">
    <div class="row mb-2 flex">
        <div class="col-md-6">
            <a href="#" class="thumbnail"><img src="/_catalogs/masterpage/ASPR/images/CareersTile.png" alt="" />
                <div class="thumbnail-description">
                    <p>TILE TITLE<span>Subcontent available here.</span></p>
                </div>
            </a>
        </div>
        <div class="col-md-6">
            <a href="#" class="thumbnail"><img src="/_catalogs/masterpage/ASPR/images/CareersTile.png" alt="" />
                <div class="thumbnail-description">
                    <p>TILE TITLE<span>Subcontent available here.</span></p>
                </div>
            </a>
        </div>
    </div>
</div>

Tiles (Three)

TILE TITLESubcontent available here.

TILE TITLESubcontent available here.

TILE TITLESubcontent available here.

Copy/Paste: Tiles (Three)

            
<div class="container">
    <div class="row mb-2 flex">
        <div class="col-md-4">
            <a href="#" class="thumbnail"><img class="img-responsive w-100" src="/_catalogs/masterpage/ASPR/images/CareersTile.png" alt="" />
                <div class="thumbnail-description">
                    <p>TILE TITLE<span>Subcontent available here.</span></p>
                </div>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#" class="thumbnail"><img class="img-responsive w-100" src="/_catalogs/masterpage/ASPR/images/CareersTile.png" alt="" />
                <div class="thumbnail-description">
                    <p>TILE TITLE<span>Subcontent available here.</span></p>
                </div>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#" class="thumbnail"><img class="img-responsive w-100" src="/_catalogs/masterpage/ASPR/images/CareersTile.png" alt="" />
                <div class="thumbnail-description">
                    <p>TILE TITLE<span>Subcontent available here.</span></p>
                </div>
            </a>
        </div>
    </div>
</div>

Tiles (Four)

TILE TITLESubcontent available here.

TILE TITLESubcontent available here.

TILE TITLE Subcontent available here.

TILE TITLESubcontent available here.

Copy/Paste: Tiles (Four)

            
<div class="container">
    <div class="row mb-2 flex">
        <div class="col-md-3">
            <a href="#" class="thumbnail"><img class="img-responsive w-100" src="/_catalogs/masterpage/ASPR/images/CareersTile.png" alt="" />
                <div class="thumbnail-description">
                    <p>TILE TITLE<span>Subcontent available here.</span></p>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="#" class="thumbnail"><img class="img-responsive w-100" src="/_catalogs/masterpage/ASPR/images/CareersTile.png" alt="" />
                <div class="thumbnail-description">
                    <p>TILE TITLE<span>Subcontent available here.</span></p>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="#" class="thumbnail"><img class="img-responsive w-100" src="/_catalogs/masterpage/ASPR/images/CareersTile.png" alt="" />
                <div class="thumbnail-description">
                    <p>TILE TITLE
                        <span>Subcontent available here.</span>
                    </p>
                </div>
            </a>
        </div>
        <div class="col-md-3">
            <a href="#" class="thumbnail"><img class="img-responsive w-100" src="/_catalogs/masterpage/ASPR/images/CareersTile.png" alt="" />
                <div class="thumbnail-description">
                    <p>TILE TITLE<span>Subcontent available here.</span></p>
                </div>
            </a>
        </div>
    </div>
</div>

Layout (Two Col)

Two Column Content Example

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.

Two Column Content Example

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.

Copy/Paste: Layout (Two Col)

            
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h2>Two Column Content Example</h2>
            <p>
                <strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.
            </p>
        </div>
        <div class="col-md-6">
            <h2>Two Column Content Example</h2>
            <p>
                <strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci. Aliquam pellentesque nulla lectus. Nam aliquet varius condimentum. Nullam euismod sem sapien, in mollis tellus egestas eu. Maecenas a nisi ac tellus tempus aliquam ut ornare elit.
            </p>
        </div>
    </div>
</div>

Layout (Three Col)

Three Column Content Example

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.

Three Column Content Example

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.

Three Column Content Example

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.

Copy/Paste: Layout (Three Col)

            
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h3>Three Column Content Example</h3>
            <p>
                <strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.
            </p>
        </div>
        <div class="col-md-4">
            <h3>Three Column Content Example</h3>
            <p>
                <strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.
            </p>
        </div>
        <div class="col-md-4">
            <h3>Three Column Content Example</h3>
            <p><strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.</p>
        </div>
    </div>
</div>

Layout (Four Col)

Four Column Content Example

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.

Four Column Content Example

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.

Four Column Content Example

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.

Four Column Content Example

Dummy Paragraph Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.

Copy/Paste: Layout (Four Col)

                                                                                                                                                                                                                     
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <h3>Four Column Content Example</h3>
            <p><strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.</p>
        </div>
        <div class="col-md-3">
            <h3>Four Column Content Example</h3>
            <p><strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.</p>
        </div>
        <div class="col-md-3">
            <h3>Four Column Content Example</h3>
            <p><strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.</p>
        </div>
        <div class="col-md-3">
            <h3>Four Column Content Example</h3>
            <p><strong>Dummy Paragraph Text</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet varius venenatis. Integer id mollis dui. Cras vel augue sodales, tempor nisl eget, vestibulum orci.</p>
        </div>
    </div>
</div>

Report Tiles

Dark Gray Label
Report Title and/or Description
Light Gray Label
Report Title and/or Description
Blue Label
Report Title and/or Description
Red Label
Report Title and/or Description
Orange Label
Report Title and/or Description
Yellow Label
Report Title and/or Description
Light Blue Label
Report Title and/or Description
Green Label
Report Title and/or Description

Copy/Paste: Report Tiles

                                                                                                                                                                                                                                 
<div class="container">
    <div class="row row-no-gutters">
        <div class="col-md-4">
            <a href="#####" class="report-tile thumbnail">
                <div class="report-image" style="background-image: url("/healthcarereadiness/guidance/publishingimages/performance-measures-fy20-administrative-supplemental-performance-measures-march-2021-tile.jpg");">
                    <span class="report-label bg-darkgray">Dark Gray Label</span>
                </div>
                <span class="report-title">Report Title and/or Description</span>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#####" class="report-tile thumbnail">
                <div class="report-image" style="background-image: url("/healthcarereadiness/guidance/publishingimages/performance-measures-fy20-administrative-supplemental-performance-measures-march-2021-tile.jpg");">
                    <span class="report-label bg-lightgray">Light Gray Label</span>
                </div>
                <span class="report-title">Report Title and/or Description</span>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#####" class="report-tile thumbnail">
                <div class="report-image" style="background-image: url("/healthcarereadiness/guidance/publishingimages/performance-measures-fy20-administrative-supplemental-performance-measures-march-2021-tile.jpg");">
                    <span class="report-label bg-blue">Blue Label</span>
                </div>
                <span class="report-title">Report Title and/or Description</span>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#####" class="report-tile thumbnail">
                <div class="report-image" style="background-image: url("/healthcarereadiness/guidance/publishingimages/performance-measures-fy20-administrative-supplemental-performance-measures-march-2021-tile.jpg");">
                    <span class="report-label bg-red">Red Label</span>
                </div>
                <span class="report-title">Report Title and/or Description</span>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#####" class="report-tile thumbnail">
                <div class="report-image" style="background-image: url("/healthcarereadiness/guidance/publishingimages/performance-measures-fy20-administrative-supplemental-performance-measures-march-2021-tile.jpg");">
                    <span class="report-label bg-orange">Orange Label</span>
                </div>
                <span class="report-title">Report Title and/or Description</span>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#####" class="report-tile thumbnail">
                <div class="report-image" style="background-image: url("/healthcarereadiness/guidance/publishingimages/performance-measures-fy20-administrative-supplemental-performance-measures-march-2021-tile.jpg");">
                    <span class="report-label bg-yellow">Yellow Label</span>
                </div>
                <span class="report-title">Report Title and/or Description</span>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#####" class="report-tile thumbnail">
                <div class="report-image" style="background-image: url("/healthcarereadiness/guidance/publishingimages/performance-measures-fy20-administrative-supplemental-performance-measures-march-2021-tile.jpg");">
                    <span class="report-label bg-lightblue">Light Blue Label</span>
                </div>
                <span class="report-title">Report Title and/or Description</span>
            </a>
        </div>
        <div class="col-md-4">
            <a href="#####" class="report-tile thumbnail">
                <div class="report-image" style="background-image: url("/healthcarereadiness/guidance/publishingimages/performance-measures-fy20-administrative-supplemental-performance-measures-march-2021-tile.jpg");">
                    <span class="report-label bg-green">Green Label</span>
                </div>
                <span class="report-title">Report Title and/or Description</span>
            </a>
        </div>
    </div>
</div>
            
            ​