The Quark theme is the new default theme for Grav built with Spectre.css the lightweight, responsive and modern CSS framework. Spectre provides basic styles for typography, elements, and a responsive layout system that utilizes best practices and consistent language design.

Headings <a href='/admin/powertools/edit-section/typography?section=%23%23%23+Headings'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

H1 Heading 40px <a href='/admin/powertools/edit-section/typography?section=%23+H1+Heading+%6040px%60'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

H2 Heading 32px <a href='/admin/powertools/edit-section/typography?section=%23%23+H2+Heading+%6032px%60'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

H3 Heading 28px <a href='/admin/powertools/edit-section/typography?section=%23%23%23+H3+Heading+%6028px%60'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

H4 Heading 24px <a href='/admin/powertools/edit-section/typography?section=%23%23%23%23+H4+Heading+%6024px%60'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

H5 Heading 20px <a href='/admin/powertools/edit-section/typography?section=%23%23%23%23%23+H5+Heading+%6020px%60'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

H6 Heading 16px <a href='/admin/powertools/edit-section/typography?section=%23%23%23%23%23%23+H6+Heading+%6016px%60'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

# H1 Heading&nbsp;<a href='/admin/powertools/edit-section/typography?section=%23+H1+Heading'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>
# H1 Heading `40px`</small>`&nbsp;<a href='/admin/powertools/edit-section/typography?section=%23+H1+Heading+%6040px%60%3C%2Fsmall%3E%60'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

<span class="h1">H1 Heading</span>

Paragraphs <a href='/admin/powertools/edit-section/typography?section=%23%23%23+Paragraphs'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

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 <a href='/admin/powertools/edit-section/typography?section=%23%23%23+Markdown+Semantic+Text+Elements'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

Bold **Bold**

Italic _Italic_

Deleted ~~Deleted~~

Inline Code `Inline Code`

HTML Semantic Text Elements <a href='/admin/powertools/edit-section/typography?section=%23%23%23+HTML+Semantic+Text+Elements'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

<abbr>I18N</abbr> <abbr>

<cite>Citation</cite> <cite>

<kbd>Ctrl + S</kbd> <kbd>

Text^{Superscripted} <sup>

Text_Subscripted <sub>

<u>Underlined</u> <u>

<mark>Highlighted</mark> <mark>

<time>20:14</time> <time>

<var>x = y + 2</var> <var>

Blockquote <a href='/admin/powertools/edit-section/typography?section=%23%23%23+Blockquote'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

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>

> 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 <a href='/admin/powertools/edit-section/typography?section=%23%23%23+Unordered+List'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

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

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

Ordered List <a href='/admin/powertools/edit-section/typography?section=%23%23%23+Ordered+List'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

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

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 <a href='/admin/powertools/edit-section/typography?section=%23%23%23+Table'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

| 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    |

Notices <a href='/admin/powertools/edit-section/typography?section=%23%23%23+Notices'><i class='fa fa-edit' style='font-size:initial' title='Edit Section'></i></a>

The notices styles are actually provided by the markdown-notices plugin but are useful enough to include here:

! This is a warning notification

!! This is a error notification

!!! This is a default notification

!!!! This is a success notification

Edit Page On Grav