2. Typography #
2.1. Headings #
Headings should be used to provide structure to the content. Use h1 for main headings, h2 for subheadings, and so on.
H1: Pack my box with five dozen liquor jugs.
H2: Pack my box with five dozen liquor jugs.
H3: Pack my box with five dozen liquor jugs.
H4: Pack my box with five dozen liquor jugs.
H5: Pack my box with five dozen liquor jugs.
H6: Pack my box with five dozen liquor jugs.
2.2. Paragraphs #
Paragraphs are used to group related sentences or phrases together. They should be separated by an empty line.
Paragraph Default (p3) — How vexingly quick daft zebras jump!.
Paragraph Medium (p2) text-md — How vexingly quick daft zebras jump!.
Paragraph Large (p1) text-lg — How vexingly quick daft zebras jump!.
Text Custom 1 text-custom-1 — How vexingly quick daft zebras jump!.
Text Custom 2 text-custom-2 — How vexingly quick daft zebras jump!.
Text Custom 3 text-custom-3 — How vexingly quick daft zebras jump!.
Text Custom 4 text-custom-4 — How vexingly quick daft zebras jump!.
Text Custom 5 text-custom-5 — How vexingly quick daft zebras jump!.
Text Custom 6 text-custom-6 — How vexingly quick daft zebras jump!.
Text Custom 7 text-custom-7 — How vexingly quick daft zebras jump!.
Text Custom 8 text-custom-8 — How vexingly quick daft zebras jump!.
Text Custom 9 text-custom-9 — How vexingly quick daft zebras jump!.
Text Custom 10 text-custom-10 — How vexingly quick daft zebras jump!.
A paragraph can contain links, like this one, and different inline elements like bold, small, italic, underline, strikethrough, subscript, superscript, abbr., highlighted, kbd, and code.
2.3. Blockquote #
Use the blockquote tag to indicate a section that is quoted from another source.
“Simple things should be simple, complex things should be possible.”
Alan Kay (Without Class)
2.4. Lists #
Lists are a useful way to present information. Use ul for unordered lists and ol for ordered lists.
Ensure that you avoid resetting all list elements since doing so could be useful for styling other layout elements, while still preserving their intended purpose for formatted text.
What you need to consider?
- What are the default margin and padding for the list?
- What is the default list style type?
- Do you plan on using custom list style icons such as:
- stars
- checkmarks
- colored bullets or list numbers
- How will you style nested lists?
- Will you keep the browser default styling or create a custom style?
- If you choose to create a custom style, consider only styling the top-level list item to maintain browser defaults for nesting.
- Don't forget to test multiline list items.
- Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat.
Ordered List
- Item 1
- Item 2
- Nested Item 1
- Nested Item 2
- Item 3
2.5. Image #
Content Image
3. Buttons and Links #
To enable the use of a button element as a semantic tag on various interface elements such as slider arrows, burger menus, or a closing ×, it's recommended to reset the styles for button elements without a class.
The use of anchor elements a as a button is widespread, especially for call-to-action prompts and regular Link are ubiquitous on the internet.
Buttons are a great way to make certain actions stand out on your website. Use the button tag to create buttons.
| Example | Type |
|---|---|
|
|
Primary button (small) |
|
|
Primary button (medium) |
|
|
Primary button (big) |
|
|
Secondary button (small) |
|
|
Secondary button (medium) |
|
|
Secondary button (big) |
|
|
Secondary-alternative button (small) |
|
|
Secondary-alternative button (medium) |
|
|
Secondary-alternative button (big) |
|
|
Ghost button (small) |
|
|
Ghost button (medium) |
|
|
Ghost button (big) |
|
|
Ghost-alternative button (small) |
|
|
Ghost-alternative button (medium) |
|
|
Ghost-alternative button (big) |
| Primary button (big) with icon | |
| Ghost altenative button (big) with icon |
Default clean buttons:
Links are an essential part of any website. Use the a tag to create links.
| Example | Type |
|---|---|
| Link Label | Regular Content Link |
| primary primary | Primary button (small) |
| primary primary | Primary button (medium) |
| primary primary | Primary button (big) |
| secondary secondary | Secondary button (small) |
| secondary secondary | Secondary button (medium) |
| secondary secondary | Secondary button (big) |
| secondary-alternative secondary-alternative | Secondary-alternative button (small) |
| secondary-alternative secondary-alternative | Secondary-alternative button (medium) |
| secondary-alternative secondary-alternative | Secondary-alternative button (big) |
| ghost ghost | Ghost button (small) |
| ghost ghost | Ghost button (medium) |
| ghost ghost | Ghost button (big) |
| ghost-alternative ghost-alternative | Ghost-alternative button (small) |
| ghost-alternative ghost-alternative | Ghost-alternative button (medium) |
| ghost-alternative ghost-alternative | Ghost-alternative button (big) |
A popular approach is to present buttons horizontally, which is frequently done using the .button-group class as a convenient tool.
5. Icons #
Our icon set is based on Icomoon. Icomoon is the icon font library. It provides a wide range of customizable icons that can be easily added using CSS classes.
Here are set for current project:
To use an icon, copy the corresponding HTML code from Icomoon's library and paste it into your HTML code. Be sure to include the necessary CSS and font files.
