blog
IONIQ Style Library
Colors
Headings
H1 Brand Claims / Product Names
H1 Heading
H1 Category
H2 Heading
H2 Category
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Headings with Anchor Line
The anchor line underlines the main heading of a section. While it is often used to separate a heading from a following paragraph or sub heading, the anchor line and heading can also be used on their own.
To ensure visual consistency, the anchor line's dimensions and margins follow a clear set of definitions that can be found in the IONIQ Brand Book.
Basic Anchor Lines
H1 Heading With Anchor
H2 Heading With Anchor
H3 Heading With Anchor
Anchor Line With Custom Styles
H1 Heading With SUN Anchor
H2 Heading With Centered TAN Anchor
H3 Heading With Right Anchor
Anchor Line
The Anchor Line can also be used standalone without a connected heading to separate elements. The font-size of an
.anchor-line (base size = 44px) determine its thickness and margins according to the definition in the IONIQ Brand Book.
Basic Anchor Line
Anchor Line With Custom Styles
Anchor Line With Small Margins
Adjusted Font Size to Vary Thickness and Margins
Text
This line of text shows a simple paragraph.
This line of text shows a simple paragraph with an inline link.
This line of text is meant to be treated as deleted text.
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.
Lists
- Short text
- Longer text. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
- Short text.
An Unordered HTML List With Check Icons
- Feature 1
- Feature 2
- Feature 3
An Ordered HTML List
- Short text
- Longer text. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
- Short text.
Buttons
Form Fields
Badges
Comparison Table
Table With Header Rows
 Product A |
Product B |
Product C |
|---|---|---|
| Text | ||
| Lorem ipsum | Dolor sit amet | Dolor sit amet |
| Icon | ||
 |
|
 |
| Badge | ||
| Success | Warning | Error |
| Button | ||
|
Learn more |
Learn more |
Learn more |
Table With Header Column
|
Product A |
Product B |
|
|---|---|---|
| Text | Lorem ipsum | Dolor sit amet |
| Icon | |
|
| Badge | Success | Error |
| Button |
Learn more |
Learn more |
Icons
