This page is way outdated, it's mostly just good for previewing colour schemes. TODO: merge with the other typography page.
Theme editor: https://themes.ionevolve.com/
Colours
Buttons
Tabs
Toggles checkbox
Cards
DaisyUI Card
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus.
Global Illustration Observer
Business Alignment Developer
Glass
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos.
HorizontalNEW
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.
Image overlay
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.
Alerts
Dropdowns
Modals
Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea quasi eligendi. Saepe velit autem minima.
Steps
- Register
- Choose plan
- Purchase
- Receive Product
Avatars
Paragraphs with badges
daisyUI adds some style to tailwindcss/typographyso it will use the same theme as other elements. Just make sure on your tailwind.config.js, you have daisyUI aftertailwindcss/typography
Pre / Code panel
module.exports = /...plugins: [ require('tailwindcss/typography'), require('daisyui'), ],Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Blockquotes
Inventore non totam deserunt est alias ducimus. Corrupti quidem debitis quo corrupti et laborum totam. Ut aperiam et delectus aliquam nulla magnam quis perspiciatis.
Links
Text decorators
You can use the mark tag tohighlighttext.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
attr
HTML
Lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
List nesting
- Nested lists are rarely a good idea.
- You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
- Nested navigation in UIs is a bad idea too, keep things as flat as possible.
- Nesting tons of folders in your source code is also not helpful.
- Since we need to have more items, here's another one.
- I'm not sure if we'll bother styling more than two levels deep.
- Two is already too much, three is guaranteed to be a bad idea.
- If you nest four levels deep you belong in prison.
- Two items isn't really a list, three is good though.
- Again please don't nest lists if you want people to actually read your content.
- Nobody wants to look at this.
- I'm upset that we even have to bother styling this.
Figures
Tables
| Wrestler | Origin | Finisher |
|---|---|---|
| Bret "The Hitman" Hart | Calgary, AB | Sharpshooter |
| Stone Cold Steve Austin | Austin, TX | Stone Cold Stunner |
| Randy Savage | Sarasota, FL | Elbow Drop |
| Vader | Boulder, CO | Vader Bomb |
| Razor Ramon | Chuluota, FL | Razor's Edge |
Janis Johnson
Accounts Agent
Meredith Mayer
Data Liaison
Karolann Collins
Direct Interactions Liaison
4,600
Page views
Enable Notifications
To get latest updates
Top 10 UI Components
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.
Downloading...
Colour palette
These are default utility classes that use color names:
bg-_COLOR_NAME_text-_COLOR_NAME_border-_COLOR_NAME_from-_COLOR_NAME_via-_COLOR_NAME_to-_COLOR_NAME_placeholder-_COLOR_NAME_divide-_COLOR_NAME_ring-_COLOR_NAME_ring-offset-_COLOR_NAME_For example these are all the background colors:
| Class name | ||
|---|---|---|
| bg-primary | Primary color | |
| bg-primary-focus | Primary color - focused | |
| bg-primary-content | Foreground content color to use on primary color | |
| bg-secondary | Secondary color | |
| bg-secondary-focus | Secondary color - focused | |
| bg-secondary-content | Foreground content color to use on secondary color | |
| bg-accent | Accent color | |
| bg-accent-focus | Accent color - focused | |
| bg-accent-content | Foreground content color to use on accent color | |
| bg-neutral | Neutral color | |
| bg-neutral-focus | Neutral color - focused | |
| bg-neutral-content | Foreground content color to use on neutral color | |
| bg-base-100 | Base color of page, used for blank backgrounds | |
| bg-base-200 | Base color, a little darker | |
| bg-base-300 | Base color, even more darker | |
| bg-base-content | Foreground content color to use on base color | |
| bg-info | Info color | |
| bg-success | Success color | |
| bg-warning | Warning color | |
| bg-error | Error color |