mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
108 lines
4.3 KiB
Plaintext
108 lines
4.3 KiB
Plaintext
---
|
|
title: Shape
|
|
summary: A tinted, rounded square that holds one icon, for feature lists and other places where an icon needs a background.
|
|
description: Put an icon on a soft, tinted background with the shape component. Pick a size and a color, or set the corner radius with a CSS variable.
|
|
related: [/ui/components/avatar, /ui/components/icon]
|
|
source: core/scss/ui/_shape.scss
|
|
css-vars: shape
|
|
added-in: '1.7.0'
|
|
classnames:
|
|
component:
|
|
- class: shape
|
|
desc: Container element, an inline rounded square in the primary color
|
|
color:
|
|
- class: shape-{color}
|
|
desc: Any palette color, for example shape-red or shape-teal
|
|
size:
|
|
- class: shape-{size}
|
|
desc: Avatar sizes from shape-xxs to shape-2xl
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import Icon from '@ui/Icon.astro';
|
|
|
|
## Default markup
|
|
|
|
A shape is a `.shape` element with one icon inside. It is a square with soft corners, filled with a light tint of the primary color. The icon takes the stronger primary color. The square is the same size as an [avatar](/ui/components/avatar), so the two line up in a list.
|
|
|
|
<Example centered>
|
|
<span class="shape"><Icon name="devices" /></span>
|
|
</Example>
|
|
|
|
## Sizes
|
|
|
|
Add `.shape-{size}` to change the size. The sizes are the avatar sizes, from `xxs` to `2xl`. The icon grows with the square.
|
|
|
|
<Example centered>
|
|
<div class="d-flex align-items-end gap-3">
|
|
<span class="shape shape-xxs"><Icon name="star" /></span>
|
|
<span class="shape shape-xs"><Icon name="star" /></span>
|
|
<span class="shape shape-sm"><Icon name="star" /></span>
|
|
<span class="shape shape-md"><Icon name="star" /></span>
|
|
<span class="shape shape-lg"><Icon name="star" /></span>
|
|
<span class="shape shape-xl"><Icon name="star" /></span>
|
|
<span class="shape shape-2xl"><Icon name="star" /></span>
|
|
</div>
|
|
</Example>
|
|
|
|
## Colors
|
|
|
|
Add `.shape-{color}` to use another palette color. The square takes the light tint of the color and the icon takes the full color.
|
|
|
|
<Example centered>
|
|
<div class="d-flex flex-wrap gap-3">
|
|
<span class="shape shape-blue"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-azure"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-indigo"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-purple"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-pink"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-red"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-orange"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-yellow"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-lime"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-green"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-teal"><Icon name="brand-bootstrap" /></span>
|
|
<span class="shape shape-cyan"><Icon name="brand-bootstrap" /></span>
|
|
</div>
|
|
</Example>
|
|
|
|
## Corner radius
|
|
|
|
The corners are rounded by `35%` of the size. Set `--tblr-shape-border-radius` on the shape to change this: `50%` makes a circle, `0` makes a sharp square.
|
|
|
|
<Example centered>
|
|
<div class="d-flex gap-3">
|
|
<span class="shape shape-md" style="--tblr-shape-border-radius: 0"><Icon name="palette" /></span>
|
|
<span class="shape shape-md"><Icon name="palette" /></span>
|
|
<span class="shape shape-md" style="--tblr-shape-border-radius: 50%"><Icon name="palette" /></span>
|
|
</div>
|
|
</Example>
|
|
|
|
## In a feature list
|
|
|
|
Shapes mark the items of a feature list. Put one above or next to each heading, with the same size and color on every item.
|
|
|
|
<Example>
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<span class="shape shape-md mb-3"><Icon name="devices" /></span>
|
|
<h3>Mobile-optimized</h3>
|
|
<p class="text-secondary">Every page works on any screen size.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<span class="shape shape-md mb-3"><Icon name="mailbox" /></span>
|
|
<h3>Tested email clients</h3>
|
|
<p class="text-secondary">Checked in more than 90 email clients.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<span class="shape shape-md mb-3"><Icon name="palette" /></span>
|
|
<h3>Minimal design</h3>
|
|
<p class="text-secondary">Clean layouts based on Bootstrap.</p>
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- A shape is decoration. The icon inside renders with `aria-hidden="true"`, so the shape adds nothing to the accessibility tree.
|
|
- Put the meaning in the text next to the shape, not in the icon or the color.
|