mirror of
https://github.com/tabler/tabler.git
synced 2026-08-08 20:32:24 +04:00
Paweł Kuna
99 lines
2.8 KiB
HTML
99 lines
2.8 KiB
HTML
---
|
|
title: Badges
|
|
page-header: Badges
|
|
page-menu: base.badges
|
|
layout: default
|
|
permalink: badges.html
|
|
---
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h1>Example heading <span class="badge">New</span></h1>
|
|
<h2>Example heading <span class="badge">New</span></h2>
|
|
<h3>Example heading <span class="badge">New</span></h3>
|
|
<h4>Example heading <span class="badge">New</span></h4>
|
|
<h5>Example heading <span class="badge">New</span></h5>
|
|
<h6>Example heading <span class="badge">New</span></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="badges-list">
|
|
{% for color in site.colors %}
|
|
<span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg">{{ color[1].title }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="badges-list">
|
|
{% for color in site.colors %}
|
|
<span class="badge bg-{{ color[0] }}-lt">{{ color[1].title }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="badges-list">
|
|
{% for color in site.colors %}
|
|
<span class="badge badge-outline text-{{ color[0] }}">{{ color[1].title }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
{% include "ui/dropdown-menu.html" show=true badge=true arrow=true %}
|
|
</div>
|
|
<div class="col-sm-6 col-lg-9">
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="btn-list">
|
|
{% for color in site.colors %}
|
|
<button class="btn">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg ms-2">{{ forloop.index }}</span></button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="btn-list">
|
|
{% for color in site.colors %}
|
|
<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg badge-notification badge-pill">{{ forloop.index }}</span></button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="btn-list">
|
|
{% for color in site.colors %}
|
|
<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} badge-notification badge-blink"></span></button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |