mirror of
https://github.com/tabler/tabler.git
synced 2026-07-14 09:34:19 +04:00
Paweł Kuna
59 lines
1.9 KiB
HTML
59 lines
1.9 KiB
HTML
---
|
|
layout: default
|
|
title: Patterns
|
|
page-header: Patterns
|
|
page-menu: base.patterns
|
|
permalink: patterns.html
|
|
---
|
|
|
|
{% assign patterns = "bg-pattern-diagonal,bg-pattern-diagonal-2,bg-pattern-dots,bg-pattern-rectangles,bg-pattern-lines,bg-pattern-lines-vertical,bg-pattern-grid,bg-pattern-grid-diagonal,bg-pattern-blueprint,bg-pattern-circles,bg-pattern-diagonal-stripes,bg-pattern-diagonal-stripes-2,bg-pattern-zigzag,bg-pattern-vertical-stripes,bg-pattern-horizontal-stripes" | split: "," %}
|
|
{% assign pattern-sizes = "sm,md,lg,xl" | split: "," %}
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Pattern types</h3>
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
|
{% for pattern in patterns %}
|
|
<div class="col">
|
|
<div class="{{ pattern }} rounded mb-3" style="height: 8rem;"></div>
|
|
<code>.{{ pattern }}</code>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Pattern colors</h3>
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
|
{% for color in site.colors %}
|
|
<div class="col">
|
|
<div class="bg-pattern-rectangles bg-pattern-{{ color[0] }} rounded mb-3" style="height: 8rem;"></div>
|
|
<code>.bg-pattern-{{ color[0] }}</code>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Pattern sizes</h3>
|
|
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
|
{% for size in pattern-sizes %}
|
|
<div class="col">
|
|
<div class="bg-pattern-diagonal bg-pattern-{{ size }} rounded mb-3" style="height: 8rem;"></div>
|
|
<code>.bg-pattern-{{ size }}</code>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|