Ribbon
Ribbon can highlight cards
Ribbon overhead
Use .hk-ribbon-type-1 with .overhead-start, .overhead-end or .overhead-center
overhead start
Special title treatment
With supporting text below as a natural lead-in to additional content.
overhead center
Special title treatment
With supporting text below as a natural lead-in to additional content.
overhead end
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
| Class | Values |
|---|---|
class="hk-ribbon-type-1 overhead-[value]" |
start / center / end |
Ribbon over
Use .hk-ribbon-type-1 with .start-over, or .end-over
Start over
Special title treatment
With supporting text below as a natural lead-in to additional content.
End over
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 start-over">
<span>Start over</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 end-over">
<span>End over</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
| Class | Values |
|---|---|
class="hk-ribbon-type-1 [value]-over" |
start / end |
Ribbon touch
Use .hk-ribbon-type-1 with .start-over, or .end-over
start touch
Special title treatment
With supporting text below as a natural lead-in to additional content.
end touch
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 start-touch">
<span>start touch</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 end-touch">
<span>end touch</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
| Class | Values |
|---|---|
class="hk-ribbon-type-1 [value]-over" |
start / end |
Ribbon Square
Use the .hk-ribbon-type-1 .ribbon-square
overhead start
Special title treatment
With supporting text below as a natural lead-in to additional content.
overhead center
Special title treatment
With supporting text below as a natural lead-in to additional content.
overhead end
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 ribbon-square overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 ribbon-square overhead-center">
<span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 ribbon-square overhead-end">
<span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
Ribbon with Icon
Use the .hk-ribbon-type-1 .ribbon-wth-icon.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 ribbon-wth-icon overhead-start">
<span><span class="feather-icon"><i data-feather="award"></i></span> overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 ribbon-wth-icon overhead-center">
<span><span class="feather-icon"><i data-feather="settings"></i></span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 ribbon-wth-icon overhead-end">
<span><span class="feather-icon"><i data-feather="award"></i></span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
Ribbon with Flag
Use the .hk-ribbon-type-1 .ribbon-wth-icon .ribbon-wth-flag.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag overhead-start">
<span><span class="feather-icon"><i data-feather="award"></i></span> overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag overhead-center">
<span><span class="feather-icon"><i data-feather="settings"></i></span>overhead center</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-1 ribbon-wth-icon ribbon-wth-flag overhead-end">
<span><span class="feather-icon"><i data-feather="award"></i></span>overhead end</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
Ribbon type 2
Use the .hk-ribbon-type-2 .ribbon-wth-flag.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-2 ribbon-wth-flag overhead-start">
<span><span class="feather-icon"><i data-feather="award"></i></span></span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-2 ribbon-wth-flag overhead-center">
<span><span class="feather-icon"><i data-feather="archive"></i></span></span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-2 ribbon-wth-flag overhead-end">
<span><span class="feather-icon"><i data-feather="anchor"></i></span></span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-2 ribbon-wth-flag overhead-start top-touch">
<span><span class="feather-icon"><i data-feather="book-open"></i></span></span>
</div>
<div class="card-body mt-5">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-2 ribbon-wth-flag overhead-center top-touch">
<span><span class="feather-icon"><i data-feather="briefcase"></i></span></span>
</div>
<div class="card-body mt-5">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hk-ribbon-type-2 ribbon-wth-flag overhead-end top-touch">
<span><span class="feather-icon"><i data-feather="bell"></i></span></span>
</div>
<div class="card-body mt-5">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
Color Option
Use the .hk-ribbon-*.
overhead start
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="card">
<div class="hk-ribbon-type-1 hk-ribbon-warning overhead-start">
<span>overhead start</span>
</div>
<div class="card-body mt-4">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
| Class | Values |
|---|---|
class="hk-ribbon-type-1 hk-ribbon-[Value]" |
primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |