Boxes

• Posted: February 16, 2015
• / By: Julita
• / In:

There are two types of boxes:

Image Box

Image Box

HTML markup:

XHTML

<div class="imageBox ct-u-paddingBoth40"> <img src="assets/images/demo-content/services-item1.jpg" alt="Services Item 1"> <div class="imageBox-content"> <div class="imageBox-content-title ct-u-size16 ct-fw-600 ct-u-paddingBottom10">Jewelry Cleaning Maintainance</div> <div class="imageBox-content-tip ct-u-size16 ct-u-colorLighterGrey ct-fs-i ct-u-paddingBottom25"> Maintaining the beauty of your jewelry is easy </div> <p class="imageBox-content-description text-justify ct-u-size16"> Duis tristique risus in ullamciorperi susicipit. Praiesent aucitor magna id ipsuim vehicula fermentium. Sed cuirsuis neque eget mauris pellenteisque egestas et in ante. Nunc ultrices dui nunc, placerat imperdiet urna vehicula in. </p> </div> <div class="clearfix"></div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="imageBox ct-u-paddingBoth40">                             <img src="assets/images/demo-content/services-item1.jpg" alt="Services Item 1">                             <div class="imageBox-content">                                 <div class="imageBox-content-title ct-u-size16 ct-fw-600 ct-u-paddingBottom10">Jewelry Cleaning Maintainance</div>                                 <div class="imageBox-content-tip ct-u-size16 ct-u-colorLighterGrey ct-fs-i ct-u-paddingBottom25">                                     Maintaining the beauty of your jewelry is easy                                 </div>                                 <p class="imageBox-content-description text-justify ct-u-size16">                                     Duis tristique risus in ullamciorperi susicipit. Praiesent aucitor magna id ipsuim vehicula fermentium. Sed cuirsuis neque eget mauris pellenteisque egestas et in ante. Nunc ultrices dui nunc, placerat imperdiet urna vehicula in.                                 </p>                             </div>                             <div class="clearfix"></div>                         </div>

Number Box

Number box

XHTML

<div class="numberBox"> <div class="ct-u-paddingTop30 ct-u-paddingBottom30"> <div class="numberBox-iconBox"><span class="numberBox-icon ct-u-size18">1</span></div> <div class="numberBox-title ct-u-size24">Jewelry Financing</div> </div> <div class="numberBox-description ct-u-size16 text-justify ct-u-paddingBottom25"> Suspendisse volutpat neque quam, ac vehicula lacus eleifend vel. Doneiuc egestas iuivehicula congue. Lorem ipsum dolor sit amet, consectei tur adipiscing elit. </div> <div class="ct-u-paddingBottom50"> <a class="btn btn-default" href="#"><i class="fa fa-long-arrow-right fa-fw"></i> details</a> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12

<div class="numberBox">                             <div class="ct-u-paddingTop30 ct-u-paddingBottom30">                                 <div class="numberBox-iconBox"><span class="numberBox-icon ct-u-size18">1</span></div>                                 <div class="numberBox-title ct-u-size24">Jewelry Financing</div>                             </div>                             <div class="numberBox-description ct-u-size16 text-justify ct-u-paddingBottom25">                                 Suspendisse volutpat neque quam, ac vehicula lacus eleifend vel. Doneiuc egestas iuivehicula congue. Lorem ipsum dolor sit amet, consectei tur adipiscing elit.                             </div>                             <div class="ct-u-paddingBottom50">                                 <a class="btn btn-default" href="#"><i class="fa fa-long-arrow-right fa-fw"></i> details</a>                             </div>                         </div>