DashByte - Premium Dashboard Template

Components

Markers

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.

Sample Marker

<div class="position-relative w-50">
  <div class="marker top-left shadow-sm">Image Marker</div>
  <img src="../assets/img/img2.jpg" class="img-fluid rounded" alt="">
</div>

Positioning

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

Top Left Marker

Top Right Marker

Bottom Left Marker

Bottom Right Marker

<div class="marker top-left">Top Left Marker</div>
<div class="marker top-right">Top Right Marker</div>
<div class="marker bottom-left">Bottom Left Marker</div>
<div class="marker bottom-right">Bottom Right Marker</div>

Icon Marker

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

<div class="marker-icon top-left"><i class="ri-star-line"></i></div>
<div class="marker-icon bottom-right"><i class="ri-star-line"></i></div>

Ribbon Marker

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

Top Left Marker

Top Right Marker

<div class="marker-ribbon top-left">Top Left Marker</div>
<div class="marker-ribbon top-right">Top Right 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.

Primary

Success