4-medallions.html

    <!--This sample will create a title and a set of 4 medallions with specific stacking behavior when resizing browsers. Edits text in CAPS with your content. Medallions will resize to 2 on top before becoming a single column. Images must be 102x102.-->

<!--title begins here as a separate element-->
<br xmlns="http://www.w3.org/1999/html">
<h1 class="text-center">TITLE</h1>
<p class="text-center">SUBTITLE</p>

<div class="row">
    <ul class="cards-list">
        <!--individual medallions begin here, class definitions below control specific behavior-->
        <!--first medallion begins here-->
        <li class="col-xs-12 col-sm-6 col-md-3"
            style="text-align: center; padding-bottom: 24px; padding-left: 10px; padding-right: 10px;">
        <br>

        <a href="WEB PAGE LINK"
           target="_blank">
            <!--image at 102x102 in size-->
            <img src="IMAGE WEB LINK"
                 alt="IMAGE HOVER TEXT"></a><br>
        <a Href="WEB PAGE LINK"
           target="_blank" style="color:#333">
            <!--text below image up to three lines. adjust with break tags for stacking-->
            <!--title text in medallion maximum 25 characters-->
            SAMPLE TEXT:<br>2ND LINE BREAK<br>3RD LINE BREAK</a>

        </a>
        </li>
        <!--second medallion begins here-->
        <li class="col-xs-12 col-sm-6 col-md-3"
            style="text-align: center; padding-bottom: 24px; padding-left: 10px; padding-right: 10px;">
        <br>
        <a href="WEB PAGE LINK"
           target="_blank">
            <!--image at 102x102 in size-->
            <img src="IMAGE WEB LINK"
                 alt="IMAGE HOVER TEXT"></a><br>
        <a href="WEB PAGE LINK"
           target="_blank" style="color:#333">
            <!--text below image up to three lines. adjust with break tags for stacking-->
            <!--title text in medallion maximum 25 characters-->
            SAMPLE TEXT:<br>2ND LINE BREAK<br>3RD LINE BREAK</a>
        </li>

        <!--third medallion begins here-->

        <li class="col-xs-12 col-sm-6 col-md-3"
            style="text-align: center; padding-bottom: 24px; padding-left: 10px; padding-right: 10px;">
        <br>
        <a href="WEB PAGE LINK"
           target="_blank">
            <!--image at 102x102 in size-->
            <img src="WEB IMAGE LINK"
                 alt="IMAGE HOVER TEXT"></a><br>
        <a href="WEB PAGE LINK"
           target="_blank"
           style="color:#333">
            <!--text below image up to three lines. adjust with break tags for stacking-->
            <!--title text in medallion maximum 25 characters-->
            SAMPLE TEXT:<br>2ND LINE BREAK<br>3RD LINE BREAK</a>
        </li>
        <!--fourth medallion begins here-->
        <li class="col-xs-12 col-sm-6 col-md-3"
            style="text-align: center; padding-bottom: 24px; padding-left: 10px; padding-right: 10px;">
        <br>
        <a href="WEB PAGE LINK"
           target="_blank">
            <!--image at 102x102 in size-->
            <img src="WEB IMAGE LINK"
                 alt="IMAGE HOVER TEXT"></a><br>
        <a href="WEB PAGE LINK"
           target="_blank"
           style="color:#333">
            <!--text below image up to three lines. adjust with break tags for stacking-->
            <!--title text in medallion maximum 25 characters-->
            SAMPLE TEXT:<br>2ND LINE BREAK<br>3RD LINE BREAK</a>
        </li>


    </ul>
</div>