{Theme} comes with several types of image boxes. All of them creates Images with caption.
Below you will find example of HTML markup to use:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<article class="ct-imageBox"> <figure class="ct-imageBox-wrapperOuter"> <a href="single-product.html"> <div class="ct-imageBox-container *ct-imageBox-container-shadow*"> <div class="ct-imageBox-hover *ct-imageBox-hover--type1*"></div> [image] <div class="ct-decoration <strong>ct-decoration--type5</strong> <strong>ct-decoration-decorationBorder</strong>"> <div> <div class="ct-decoration-textContainer"> <div class="ct-decoration-text"> <h5><span>New</span></h5> </div> </div> </div> </div> </div> </a> <figcaption class="ct-imageBox-wrapperInner ct-imageBox-wrapperInner--type1"> [content] </figcaption> </figure> </article> |
The only required class to use is ct-imageBox-container. Other classes can be replaces with the following variations:
- ct-imageDecoration
- none
- ct-decoration-decorationBorder
- ct-imageDecoration–type1
- ct-imageDecoration–type2
- ct-imageDecoration–type3
- ct-imageDecoration–type4
- ct-imageDecoration–type5
- ct-imageBox-container
- ct-imageBox-container-shadow
- ct-imageBox-wrapperInner
- ct-imageBox-wrapperInner-type1
- ct-imageBox-wrapperInner-type2
- ct-imageBox-wrapperInner-type3
- ct-imageBox-wrapperInner-type4
- ct-imageBox-wrapperInner-type5
- ct-imageBox-hover
- none
- ct-imageBox-hover–type1
- ct-imageBox-hover–type2
Image Box – type 1
Image Box – type 2
Image Box – type 3
Image Box – type 4