---
title: Typography
url: 'https://groovy.simplo.dev/typography'
updated: '2026-09-24'
description: 'This is a short description'
---

# Typography

This is a short description

> [!NOTE]
> Quark 2 is Grav 2.0's default theme. It uses [Blades CSS](https://blades.ninja/) (the actively maintained successor to Pico CSS) as a classless foundation, layered with a Cal.com-inspired design system. Full Blades capabilities are documented in the [Official Blades CSS Docs](https://blades.ninja/#docs).

## Buttons and icon links

Open the [settings](https://groovy.simplo.dev/komma-igang/installation) when you like, or use the icon alone: [Installation](https://groovy.simplo.dev/komma-igang/installation).

- [Get started](https://groovy.simplo.dev/komma-igang)
- [Read the guides](https://groovy.simplo.dev/guider)
- [Typography](https://groovy.simplo.dev/typography)

## Headings

Quark 2 uses **Cal Sans** for display headings and treats `h1` / `h2` distinctly — `h1` sits at a lighter display weight while `h2` is bolder and gains a small accent bar to mark section breaks. `h6` is rendered as an uppercase eyebrow label.

![](https://groovy.simplo.dev/typography/bild%20%285%29.png)

### Images: shadow and icons in the text

![A screenshot with a shadow](https://groovy.simplo.dev/typography/bild%20%285%29.png)

An image on a line with text is an icon: click ![Info](https://groovy.simplo.dev/typography/ikon.png) to read more. It is as high as the line, without border or shadow.

# H1 Heading — airy, display weight

## H2 Heading — confident, with accent bar

### H3 Heading — workhorse section heading

#### H4 Heading

##### H5 Heading

###### H6 Heading — uppercase eyebrow

```markdown
# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
##### H5 Heading
###### H6 Heading
```

### Paragraphs

Body copy is set in **Inter** at 16px with a 1.7 line-height and subtle tracking. Links adopt the theme's **accent color** — by default a restrained charcoal, but configurable to any hex via `Themes → Quark 2 → Accent Color`.

Lorem ipsum dolor sit amet, consectetur [adipiscing elit. Praesent risus leo, dictum in vehicula sit amet](#), feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

### Markdown Semantic Text Elements

**Bold** `**Bold**`

*Italic* `_Italic_`

Deleted `~~Deleted~~`

`Inline Code` ``Inline Code``

### HTML Semantic Text Elements

I18N `<abbr>`

Citation `<cite>`

Ctrl + S `<kbd>`

TextSuperscripted `<sup>`

TextSubscripted `<sub>`

Underlined `<u>`

Highlighted `<mark>`

20:14 `<time>`

x = y + 2 `<var>`

### Blockquote

> The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
> 
> \- Bill Gates

```markdown
> The advance of technology is based on making it fit in so that you don't really even notice it,
> so it's part of everyday life.
>
> <cite>- Bill Gates</cite>
```

### Unordered List

- list item 1
- list item 2 
    - list item 2.1
    - list item 2.2
    - list item 2.3
- list item 3

```markdown
* list item 1
* list item 2
    * list item 2.1
    * list item 2.2
    * list item 2.3
* list item 3
```

### Ordered List

1. list item 1
2. list item 2 
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
3. list item 3

```markdown
1. list item 1
1. list item 2
    1. list item 2.1
    1. list item 2.2
    1. list item 2.3
1. list item 3
```

### Table

| Name | Genre | Release date |
|---|---|---|
| The Shawshank Redemption | Crime, Drama | 14 October 1994 |
| The Godfather | Crime, Drama | 24 March 1972 |
| Schindler's List | Biography, Drama, History | 4 February 1994 |
| Se7en | Crime, Drama, Mystery | 22 September 1995 |

```markdown
| Name                        | Genre                         | Release date         |
| :-------------------------- | :---------------------------: | -------------------: |
| The Shawshank Redemption    | Crime, Drama                  | 14 October 1994      |
| The Godfather               | Crime, Drama                  | 24 March 1972        |
| Schindler's List            | Biography, Drama, History     | 4 February 1994      |
| Se7en                       | Crime, Drama, Mystery         | 22 September 1995    |
```

### Table options

| Option | What it does |
|---|---|
| `striped` | Every other row tinted |
| `middle` | Cells vertically centred |
| `full` | As wide as the column |
| `plain` | No lines and no tinted header row |
| `first-33` | The first column a third of the table (15–50 %) |

| ![Info](https://groovy.simplo.dev/typography/ikon.png) | Icons with a link beside them: [Typography](https://groovy.simplo.dev/typography) |
|---|---|
| ![Info](https://groovy.simplo.dev/typography/ikon.png) | A plain table has no lines: [Guides](https://groovy.simplo.dev/guider) |

### Boxes

> **Read more**
> 
> A box holds any content: text, [links](https://groovy.simplo.dev/guider), lists, tables, callouts and other boxes.
> 
> - The word after `BOX` is a Lucide icon
> - or one of the page's pictures

> A box with one of the page's pictures beside it.

> A box without an icon.

### Steps

> **1. Open the settings**
> 
> Steps are numbered on their own, in one run per page: this is step 1.

> ### 2. Choose what to change
> 
> A step's title may be a heading: it keeps its anchor and stands in the table of contents.
> 
> 1. Pick a group
> 2. Change the value
> 
> > [!TIP]
> > 
> > A step holds anything: lists, pictures, callouts, tables and boxes.

> **A step without a number**
> 
> `[!STEP plain]` has no label and is not counted.

> **A. Start a new run**
> 
> A letter or a number after `STEP` sets the value, and the run goes on from there.

> **B. Save**
> 
> This one is B.

### Collapsible sections

> **What is a collapsible section?**
> 
> A title the reader opens to see the content. Print, export and search always have all of it.

> **Open from the start**
> 
> Sections right after one another stand together as an accordion.
> 
> - Lists, pictures and callouts work here too

### Picture with numbered points

![Two ways to build a car](https://groovy.simplo.dev/typography/bild%20%285%29.png)

1. **A skateboard** The first thing that can be used. Point at a number, tab to it or tap it.
2. **A bicycle** Each step is something whole that works.
3. **A car** Near the right edge the explanation opens to the left (`sw`).
4. **Not like this** A car in parts helps nobody until the last one.

### Alerts

Grav 2.0 replaces the legacy `markdown-notices` plugin with [`github-markdown-alerts`](https://github.com/grav/grav-plugin-github-markdown-alerts), which renders [GitHub-flavored Markdown alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts). Five types are available, each with an accent stripe, icon, and label:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

```markdown
> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.
```

The [Quark 2 theme](https://github.com/getgrav/grav-theme-quark2) is Grav's new default, replacing the long-serving Quark (1.x) theme. It pairs a pure-grayscale palette with **Cal Sans** for display and **Inter** for body text (both hosted locally), Font Awesome 7 icons, and auto/light/dark appearance that persists in the user's browser. The layout system is CSS Grid + modern custom properties rather than a framework grid.

---

## Navigation

- Previous: [Groovy Docs](https://groovy.simplo.dev/index.md)
- Next: [Komma igång](https://groovy.simplo.dev/komma-igang.md)