Check out our beautiful color boxes here
Create a simple container with background color and content. Additionally you can add here up or down arrow in several positions.
Use the simple HTML markup:
1 2 3 4 5 6 7 8 9 |
<div class="ct-colorBox ct-colorBox--lighten10 ct-colorBox--before"> <div class="ct-colorBox-wrapper"> <div class="ct-colorBox-wrapperInner"> [content] </div> </div> </div> |
And extend options with the several variations:
- ct-colorBox–lighten10
- ct-colorBox–lighten20
- ct-colorBox–darken10
- ct-colorBox–darken20
- ct-colorBox–after
- ct-colorBox–before
- ct-colorBox-arrow
- ct-colorBox-arrow–top
- ct-colorBox-arrow–bottom
- ct-colorBox-arrow–left
- ct-colorBox-arrow–right
- ct-colorBox-arrow–center
- ct-colorBox-arrow–btPrev
- ct-colorBox-arrow–btNext