Ribbon can highlight cards
Use .hk-ribbon-type-1
with .overhead-start, .overhead-end or .overhead-center
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
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 |
Use .hk-ribbon-type-1
with .start-over, or .end-over
With supporting text below as a natural lead-in to additional content.
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 |
Use .hk-ribbon-type-1
with .start-over, or .end-over
With supporting text below as a natural lead-in to additional content.
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 |
Use the .hk-ribbon-type-1 .ribbon-square
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
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>
Use the .hk-ribbon-type-1 .ribbon-wth-icon
.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
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>
Use the .hk-ribbon-type-1 .ribbon-wth-icon .ribbon-wth-flag
.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
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>
Use the .hk-ribbon-type-2 .ribbon-wth-flag
.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
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>
Use the .hk-ribbon-*
.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
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 / gray / gold / smoke |