Test Page
Typography
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 'intro' 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="intro">Paragraph with class 'intro' Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
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.
Paragraph with class 'gray' 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="gray">Paragraph with class 'gray' Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
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.
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>
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.
Paragraph with class 'subtle' 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="subtle">Paragraph with class 'subtle' Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
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.
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 code
Button styling
Primary Buttons
Default buttons = Secondary buttons
Tertiary buttons
Special buttons styling
A-tag with primary button styling
A-tag with secondary button styling
A-tag with tertiary button styling
Custom loader
![Chargement...](https://architect.hpharma.eu/static/version1724155889/frontend/Baldwin/h-pharma/fr_FR/images/loader-1.gif)
Left Navigation (sidebar navigation)
Table on cms-page with class data-table (Mixin: .data-table)
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 |