mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
40 lines
1.8 KiB
Plaintext
40 lines
1.8 KiB
Plaintext
---
|
|
// Shape component: a six-item feature grid, each item with a colored shape
|
|
// above its heading, the way the marketing pages use it. Six colors so the
|
|
// tint and the icon color read as a pair across the palette, at the default
|
|
// size a page would use.
|
|
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
|
|
const features = [
|
|
{ icon: 'devices', color: 'blue', title: 'Mobile-optimized', text: 'Every page works on any screen size, from a phone to a wide monitor.' },
|
|
{ icon: 'mailbox', color: 'purple', title: 'Tested email clients', text: 'Checked in more than 90 email clients and devices.' },
|
|
{ icon: 'palette', color: 'green', title: 'Minimal design', text: 'Clean layouts based on Bootstrap and Material Design principles.' },
|
|
{ icon: 'shield-check', color: 'orange', title: 'Secure by default', text: 'Sensible defaults for forms, auth pages and user settings.' },
|
|
{ icon: 'chart-bar', color: 'red', title: 'Charts and tables', text: 'Dashboards, data grids and charts that fit in with the rest.' },
|
|
{ icon: 'users', color: 'teal', title: 'Built for teams', text: 'Shared components and docs so everyone ships the same UI.' },
|
|
]
|
|
---
|
|
|
|
<ScreenshotLayout title="Shape" columns={3}>
|
|
<Card>
|
|
<CardBody class="p-5">
|
|
<div class="row g-5 text-center">
|
|
{
|
|
features.map((feature) => (
|
|
<div class="col-4">
|
|
<span class:list={['shape', `shape-${feature.color}`, 'mb-3']}>
|
|
<Icon name={feature.icon} />
|
|
</span>
|
|
<h3 class="h3">{feature.title}</h3>
|
|
<p class="text-secondary mb-0">{feature.text}</p>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</ScreenshotLayout>
|