Themes
A collection of themes for Atlas components.
Documents
Total Revenue
$1,250.00
+12.5%Trending up this month
New Customers
1,234
-20%Down 20% this period
Active Accounts
45,678
+3.1%Strong user referrals
Total Visitors
Total for the last 3 months
| # | Header | Section Type | Target |
|---|---|---|---|
| 1 | Cover page | Cover page | 18 |
| 2 | Table of contents | Table of contents | 29 |
| 3 | Executive summary | Narrative | 12 |
| 4 | Design | Narrative | 3 |
| 5 | Capabilities | Narrative | 20 |
| 6 | Integration with existing systems | Narrative | 19 |
| 7 | Innovation and Advantages | Narrative | 25 |
| 8 | Overview of EME's Innovative Solutions | Technical content | 7 |
| 9 | Advanced Algorithms and Machine Learning | Narrative | 20 |
Pie Chart - Donut with Text
January - June 2024
Trending up by 5.2% this month
Bar Chart - Mixed
January - June 2024
Trending up by 5.2%
Lorem Ipsum Dolor Sit, Amet Elit
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas cras venenatis rutrum nunc sed blandit.
Vestibulum ante ipsum primis
Curabitur blandit tempus porttitor sed posuere consectetur est at lobortis.
Pellentesque Sollicitudin
Fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum. Maecenas faucibus mollis amet
Consectetur Adipiscing
Donec ullamcorper nulla non metus auctor fringilla vestibulum id ligula porta felis euismod semper nullam vel vehicula.
Ornare Suspendisse
Aenean lacinia bibendum nulla sed consectetur praesent commodo cursus magna vel scelerisque.
Fringilla Euismod
Cras mattis consectetur purus sit amet fermentum etiam porta sem malesuada.
Porta Malesuada
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor sed diam nonummy.
Vehicula Dapibus Mollis
Nulla vitae elit libero a pharetra augue donec id elit non mi porta gravitas eget metus.
Morbi leo risus porta ac...
Maecenas sed diam eget risus varius blandit sit amet non magna integer posuere erat a ante venenatis dapibus posuere velit aliquet cras justo odio dapibus facilisis.
Amet, 2026
Buttons
Badges
Pills
Form controls
Toggles & choices
Fieldset & legend
Tabs
composer require webreact/atlas and publish the assets with the Artisan command.
@theme block.
Icons
Card
Rotterdam terminal expansion
How a quay wall gained 400 metres without closing for a day.
Employee card
Jane Doe
Lead developer
Tom Wang
Product designer
Swiper
Video
Surface levels
muted
background
raised
card
overlay
Total revenue
$15,231.89
+20.1%from last month
Subscriptions
+2,350
+180.1%from last month
Active now
+573
-2.4%since last hour
Total visitors
Last 6 months
Upgrade your plan
Notifications
Sofia Davis
Team members
Cookie settings
Quick settings
| # | Header | Type | Status |
|---|---|---|---|
| 1 | Cover page | Cover | Done |
| 2 | Executive summary | Narrative | Done |
| 3 | Design | Narrative | In progress |
| 4 | Capabilities | Technical | Done |
| 5 | Integration | Narrative | Blocked |
| 6 | Innovation | Narrative | Done |
Donut chart
January - June 2024
Trending up by 5.2% this month
Browser usage
January - June 2024
Trending up by 5.2%
Heading Component
x-atlas::heading with level and size props
display
Display heading
h1
Heading one
h2
Heading two
h3
Heading three
h4
Heading four
h5
Heading five
h6
Heading six
Heading Sizes
Override the visual size independently of the semantic level
xl
Heading at xl size
lg
Heading at lg size
base
Heading at base size
sm
Heading at sm size
xs
Heading at xs size
Text Size Utility Classes
Tailwind utilities from the type scale: text-display, text-h1 … text-h6 set size, line height and weight from --text-{level}, --text-{level}--line-height and --text-{level}--font-weight; text-xs … text-xl are Tailwind's own. Pair them with font-heading or font-body.
.text-display
The quick brown fox
.text-h1
The quick brown fox
.text-h2
The quick brown fox
.text-h3
The quick brown fox
.text-h4
The quick brown fox
.text-h5
The quick brown fox
.text-h6
The quick brown fox
.text-xl
The quick brown fox
.text-lg
The quick brown fox
.text-base
The quick brown fox
.text-sm
The quick brown fox
.text-xs
The quick brown fox
Praesent Commodo
Sed posuere consectetur est at lobortis
Cras Justo Odio Dapibus Ac Facilisis In Egestas Eget Quam
Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida.
Amet Bibendum
Sed 15, 0000 · 8 min amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Etiam Porta Sem Malesuada Magna Mollis
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
“Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur — praesent commodo cursus magna.”
Ornare Nullam Quis Risus Eget Urna
- Vestibulum id ligula porta felis euismod semper
- Donec ullamcorper nulla non metus auctor
- Cras mattis consectetur purus amet
- Maecenas faucibus mollis interdum porttitor amet
- Fusce dapibus tellus ac cursus commodo tortor
💡 Praesent
Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum sed posuere consectetur est at lobortis nulla vitae elit.
Amet Bibendum
Ornare Vehicula & Porta Mollis
Amet nibh vulputate cursus a sit amet mauris morbi leo risus porta ac consectetur ac vestibulum at eros aenean eu leo quam pellentesque ornare.
Primary Theme Colors
Background
--color-background
Foreground
--color-foreground
Primary
--color-primary
Primary Foreground
--color-primary-foreground
Secondary & Accent Colors
Secondary
--color-secondary
Secondary Foreground
--color-secondary-foreground
Accent
--color-accent
Accent Foreground
--color-accent-foreground
UI Component Colors
Muted
--color-muted
Muted Foreground
--color-muted-foreground
Raised
--color-raised
Raised Foreground
--color-raised-foreground
Card
--color-card
Card Foreground
--color-card-foreground
Overlay
--color-overlay
Overlay Foreground
--color-overlay-foreground
Status & Feedback Colors
Info
--color-info
Info Foreground
--color-info-foreground
Success
--color-success
Success Foreground
--color-success-foreground
Warning
--color-warning
Warning Foreground
--color-warning-foreground
Danger
--color-danger
Danger Foreground
--color-danger-foreground
Utility & Form Colors
Border
--color-border
Input
--color-input
Ring
--color-ring