Artworks

---

• Components

  • Headers
  • Footers
  • Parallax
  • Cards
  • Masonry Grid
  • Buttons
  • Form Elements
  • Carousel
  • Video Pop-up
  • Floating Divs
  • Overlays
  • Zoom Effect
  • Hover Animate
  • Morphext
  • Background
  • Hover Up
  • Blockquote
  • Pagination
  • Map
  • Accordions
  • Circle Block
  • Artworks
  • Spinners
  • Icon Boxes
  • Counters
  • Progress Bars
  • Helper Classes

• Plugins

  • Animations
  • Bootstrap
  • jQuery
  • Masonry
  • Morphext
  • Owl Carousel
  • Parallax
  • Wow
  • Progress Bar
  • ImagesLoaded
  • Popper
  • Waypoints
  • jQuery Forms
  • Google reCaptcha v2

---

Positioned Border Artwork

Class .cl-image-artwork is used to create image artwork container. Adjust container width using helper Classes. Class .cl-change-layout is used for RTL support, read more about RTL support in Theme Documentation.

<div class="cl-image-artwork w-50 mx-auto cl-change-layout">
    <img class="w-100" src="path/to/some-image.png" alt="some image">
</div>

---

Round Border Artwork

Add .cl-image-border-round to image element. Adjust image width using helper Classes.

<img class="cl-image-border-round cl-w-150px d-inline-block" src="path/to/some-square-image.png" alt="some square image">

---

Square Border Artwork

Add .cl-image-border-square to image element. Add class .p-0 in case you want padding 0. Adjust image width using helper Classes.

<img class="cl-image-border-round cl-w-150px d-inline-block" src="path/to/some-square-image.png" alt="some square image">