Buy Now
  1. Components
  2. UI Elements
  3. Marker

Marker

A marker is a type of label that can be attached in any images or cards component with the help of utilities/helper classes.

Basic Example

The most basic marker that is attached to image and card component.

A marker must be positioned inside a container with position: relative by adding a helper class .pos-relative to display properly. You will also need to add overflow:hidden to the container by adding helper class .overflow-hidden to produce a rounded label.
Image Marker
Card Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

<div class="pos-relative">
  <div class="marker pos-absolute t-10 l-10">Image Marker</div>
  <img src="..." class="img-fluid rounded" alt="">
</div>

<div class="card card-body tx-white bg-primary shadow-none ht-100p overflow-hidden">
  <div class="marker pos-absolute t-10 l-10">Card Marker</div>
  <h6 class="mg-b-15 mg-t-30">What does free royalty mean?</h6>
  <p class="mg-b-0">Royalty free means...</p>
</div>

Positioning

A marker can change it's position with the help of position helper classes.

Top Left
Top Right
Bottom Left
Bottom Right
<div class="pos-relative">
  <div class="marker pos-absolute t-10 l-10">Top Left</div>
  <img src="..." class="img-fluid rounded" alt="">
</div>

<div class="pos-relative">
  <div class="marker pos-absolute t-10 r-10">Top Left</div>
  <img src="..." class="img-fluid rounded" alt="">
</div>

<div class="pos-relative">
  <div class="marker pos-absolute b-10 l-10">Top Left</div>
  <img src="..." class="img-fluid rounded" alt="">
</div>

<div class="pos-relative">
  <div class="marker pos-absolute b-10 r-10">Top Left</div>
  <img src="..." class="img-fluid rounded" alt="">
</div>

Icon Marker

A marker can be an icon with the use of class .marker-icon.

What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

<div class="pos-relative overflow-hidden rounded">
  <div class="marker-icon pos-absolute t-0 l-0"><i data-feather="zap"></i></div>
  <img src="https://via.placeholder.com/640x426" class="img-fluid" alt="">
</div>

Ribbon Marker

A marker style variant like ribbon like in the example below.

Ribbon Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

Ribbon Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

<div class="marker marker-ribbon">Ribbon Marker</div>

Contextual Variations

Add any of the below mentioned modifier classes to change the appearance of a marker. The example below uses border color utility class for card component and not part of the marker style.

What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

Ribbon Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

Ribbon Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

Ribbon Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

Ribbon Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

Ribbon Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

Ribbon Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

Ribbon Marker
What does free royalty mean?

Royalty free means you just need to pay for rights to use the item once per end product.

<div class="marker-icon marker-primary pos-absolute t-0 l-0">
  <i data-feather="zap"></i>
</div>

<div class="marker marker-ribbon marker-primary pos-absolute t-10 l-0">Ribbon Marker</div>