Testing page.
Colors
Primary colors
Contrast Primary Darker
Contrast Primary
Contrast Primary Lighter
Secondary colors
Contrast Secondary Darker
Contrast Secondary
Contrast Secondary Lighter
Grays
Contrast Gray 100
Contrast Gray 200
Contrast Gray 300
Contrast Gray 400
Contrast Gray 500
Contrast Gray 600
Messages colors
Error Txt
Info Txt
Success Txt
Typography (Base elements styling)
Heading 1 (h1)
Heading 2 (h2)
Heading 3 (h3)
Heading 4 (h4)
Heading 5 (h5)
Heading 6 (h6)
Normal paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, nibh ac commodo euismod, ante nisi laoreet justo, ac dictum velit felis sed justo. Sed egestas diam quis pulvinar convallis. Integer ac sagittis augue, in blandit orci. Ut volutpat, lorem non ultricies iaculis, massa tortor dictum eros, et placerat nisl dolor nec urna.
<p>Normal paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>Paragraph with class 'small'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, nibh ac commodo euismod, ante nisi laoreet justo, ac dictum velit felis sed justo. Sed egestas diam quis pulvinar convallis. Integer ac sagittis augue, in blandit orci. Ut volutpat, lorem non ultricies iaculis, massa tortor dictum eros, et placerat nisl dolor nec urna.
<p class="small">Paragraph with class 'small' Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>Bold paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, nibh ac commodo euismod, ante nisi laoreet justo, ac dictum velit felis sed justo. Sed egestas diam quis pulvinar convallis. Integer ac sagittis augue, in blandit orci. Ut volutpat, lorem non ultricies iaculis, massa tortor dictum eros, et placerat nisl dolor nec urna.
<strong>Bold paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, nibh ac commodo euismod, ante nisi laoreet justo, ac dictum velit felis sed justo. Sed egestas diam quis pulvinar convallis. Integer ac sagittis augue, in blandit orci. Ut volutpat, lorem non ultricies iaculis, massa tortor dictum eros, et placerat nisl dolor nec urna.
- Unordered item 1
- Unordered item 2
- Unordered item 3
- Unordered item 4
- Ordered item 1
- Ordered item 2
- Ordered item 3
- Ordered item 4
Typography (CMS Content - using Tailwind Typography Plugin (prose utility class)
Heading 1 (h1)
Heading 2 (h2)
Heading 3 (h3)
Heading 4 (h4)
Heading 5 (h5)
Heading 6 (h6)
Normal paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, nibh ac commodo euismod, ante nisi laoreet justo, ac dictum velit felis sed justo. Sed egestas diam quis pulvinar convallis. Integer ac sagittis augue, in blandit orci. Ut volutpat, lorem non ultricies iaculis, massa tortor dictum eros, et placerat nisl dolor nec urna.
<p>Normal paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>Paragraph with class 'small'. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, nibh ac commodo euismod, ante nisi laoreet justo, ac dictum velit felis sed justo. Sed egestas diam quis pulvinar convallis. Integer ac sagittis augue, in blandit orci. Ut volutpat, lorem non ultricies iaculis, massa tortor dictum eros, et placerat nisl dolor nec urna.
<p class="small">Paragraph with class 'small' Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>Bold paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, nibh ac commodo euismod, ante nisi laoreet justo, ac dictum velit felis sed justo. Sed egestas diam quis pulvinar convallis. Integer ac sagittis augue, in blandit orci. Ut volutpat, lorem non ultricies iaculis, massa tortor dictum eros, et placerat nisl dolor nec urna.
<strong>Bold paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, nibh ac commodo euismod, ante nisi laoreet justo, ac dictum velit felis sed justo. Sed egestas diam quis pulvinar convallis. Integer ac sagittis augue, in blandit orci. Ut volutpat, lorem non ultricies iaculis, massa tortor dictum eros, et placerat nisl dolor nec urna.
- Unordered item 1
- Unordered item 2
- Unordered item 3
- Unordered item 4
- Ordered item 1
- Ordered item 2
- Ordered item 3
- Ordered item 4
<hr/> Horizontal separation line html codeProduct Labels
Product Labels with icons
Custom loader
Tabs
Onze Curl Worshiping Shine Oil bevat een heerlijke mix van plantaardige oliën en houdt vocht vast en beschermt het haar tegen barre weersomstandigheden en wrijving. Met een cocktail van avocado-, kokos-, cupuaçu- en druivenpitolie fungeert deze olie ook als een nachtelijke traktatie om de soepelheid en glans te vergroten wanneer het haar wat TLC nodig heeft.
De laatste stap in je stylingroutine, het werkt om vocht vast te houden, het haar glad te maken en te beschermen tegen dagelijkse stress.
Icons
Social Media icons
Tables
Tables global styling
| Order # | Date | Ship To | Order Total | Status | Action |
|---|---|---|---|---|---|
| 000000072 | 6/26/19 | Baldwin Customer | €5,229.33 | Processing | View Order |
| 000000060 | 3/15/19 | Baldwin Customer | €196.62 | Complete | View Order Reorder |
| 000000059 | 3/15/19 | Baldwin Customer | €196.62 | Pending | View Order Reorder |
Tables using the prose utility class
| Order # | Date | Ship To | Order Total | Status | Action |
|---|---|---|---|---|---|
| 000000072 | 6/26/19 | Baldwin Customer | €5,229.33 | Processing | View Order |
| 000000060 | 3/15/19 | Baldwin Customer | €196.62 | Complete | View Order Reorder |
| 000000059 | 3/15/19 | Baldwin Customer | €196.62 | Pending | View Order Reorder |
Form elements
Tooltip example on heading/text/label element
CMS Widgets
Tiles widget - Type Contained
No link, no btn - content goes here
Tiles widget - type Contained
With link, no btn - content goes here
Tiles widget - type Floating (title only)
lundi
09:00 - 18:30
mardi
09:00 - 18:30
mercredi
09:00 - 18:30
jeudi
09:00 - 18:30
vendredi
09:00 - 18:30
samedi
09:00 - 12:30
dimanche
lundi
09:00 - 18:30
mardi
09:00 - 18:30
mercredi
09:00 - 18:30
jeudi
09:00 - 18:30
vendredi
09:00 - 18:30
samedi
09:00 - 12:30
dimanche
