Cards

Card options that can be used for this website.

---

Cards will fill the width of the container they are placed into

                         
<h2>Stand Alone with Card as Link</h2>
                         
<a href="#" class="card"><span class="inset">
   <span class="category_icon"><img src="/webres/image/icons/icon-car-house.png" width="34" alt=""></span>
   <span class="category_text">
   <span class="heading">Dental Insurance Products</span>
   <span class="subtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</span></span>
   </span>
</a>
                         
                         
<h2>Stand Alone</h2>
                         
<div class="card"><span class="inset">
   <span class="category_icon"><img src="/webres/image/icons/icon-car-house.png" width="34" alt=""></span>
   <span class="category_text">
   <span class="heading">Dental Insurance Products</span>
   <span class="subtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</span></span>
   </span>
</div>
                         
                         
<h2>Cards in a Flex 4x Grid</h2>

<div class="flex_grid flex_4x flex_margin">
   <a class="card" href="#"><span class="inset"><span class="category_icon"><br><img alt="" src="/webres/image/icons/icon-car-house.png" width="34" /></span> 
        <span class="category_text"><span class="heading">Dental Insurance Products</span><span class="subtext">Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a>
   <a class="card" href="#"><span class="inset"> <span class="category_icon"><img alt="" src="/webres/image/icons/icon-clock-money.png" width="34" /></span>
        <span class="category_text"> <span class="heading">Dental Financial Products</span><span class="subtext">Consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a> 
   <a class="card" href="#"><span class="inset"> <span class="category_icon"><img alt="" src="/webres/image/icons/icon-cc-terminal.png" width="34" /></span> 
        <span class="category_text"> <span class="heading">Physician Malpractice Insurance</span><span class="subtext">Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a> 
   <a class="card" href="#"><span class="inset"> <span class="category_icon"><img alt="" src="/webres/image/icons/icon-wheelchair.png" width="34" /></span> 
        <span class="category_text"> <span class="heading">Business Owner Insurance Products</span><span class="subtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a> 
   <a class="card" href="#"><span class="inset"> <span class="category_icon"><img alt="" src="/webres/image/icons/icon-umbrella-lock.png" width="34" /></span>
        <span class="category_text"> <span class="heading">Business Owner Financial Products</span><span class="subtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a>
</div>
                         

<h2>Cards in a Flex 3x Grid</h2>

<div class="flex_grid flex_3x flex_margin">
   <a class="card" href="#"><span class="inset"><span class="category_icon"><img alt="" src="/webres/image/icons/icon-car-house.png" width="34" /></span>
        <span class="category_text"><span class="heading">Dental Insurance Products</span>
<span class="subtext">Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a> 
   <a class="card" href="#"><span class="inset"> <span class="category_icon"><img alt="" src="/webres/image/icons/icon-clock-money.png" width="34" /></span>
        <span class="category_text"> <span class="heading">Dental Financial Products</span>
<span class="subtext">Consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a> 
   <a class="card" href="#"><span class="inset"> <span class="category_icon"><img alt="" src="/webres/image/icons/icon-cc-terminal.png" width="34" /></span> 
        <span class="category_text"> <span class="heading">Physician Malpractice Insurance</span>
<span class="subtext">Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a>
</div>


<h2>Cards in a Flex 2x Grid</h2>

<div class="flex_grid flex_2x flex_margin"><a class="card" href="#">
   <span class="inset"><span class="category_icon"><img alt="" src="/webres/image/icons/icon-car-house.png" width="34" /></span> 
       <span class="category_text"><span class="heading">Dental Insurance Products</span>
           <span class="subtext">Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a>
   <a class="card" href="#"><span class="inset"> <span class="category_icon"><img alt="" src="/webres/image/icons/icon-clock-money.png" width="34" /></span> 
       <span class="category_text"> <span class="heading">Dental Financial Products</span>
           <span class="subtext">Consectetur adipiscing elit, sed do eiusmod tempor incididunt</span></span></span></a></div>
</div>