View on GitHub

Text ribbons

Create multi-line, inline ribbons on your text. Useful for breaking up content and adding strong visual flourishes.

On this page

Examples

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

html

<h2>
  <strong class="text-ribbon text-ribbon-primary">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-primary">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

<h2 class="mt-5">
  <strong class="text-ribbon text-ribbon-success">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-success">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

<h2 class="mt-5">
  <strong class="text-ribbon text-ribbon-info">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-info">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

<h2 class="mt-5">
  <strong class="text-ribbon text-ribbon-warning">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-warning">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

<h2 class="mt-5">
  <strong class="text-ribbon text-ribbon-danger">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-danger">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

CSS

Sass variables

$text-ribbon-min-width:     $spacer * 1.3;
$text-ribbon-padding-y:     $text-ribbon-min-width * .5;
$text-ribbon-bg:            $black;

$text-ribbon-input-padding: $text-ribbon-padding-y;
$text-ribbon-input-color:   $black;