---
title: 'Text & Typography'
url: 'https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/text-typography'
markdown: 'https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/text-typography.md'
date: '2017-07-19'
description: '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. ! Details on the full capabiltiies of Spectre.css can be found in the Official Spectre Documentation Headings H1 Head'
taxonomy:
  category:
    - blog
  tag:
    - journal
  archives_month:
    - jul_2017
  archives_year:
    - '2017'
---

[ Home ](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/)      Text & Typography    

The [Quark theme](https://github.com/getgrav/grav-theme-quark) is the new default theme for Grav built with [Spectre.css](https://picturepan2.github.io/spectre/) 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.

! Details on the full capabiltiies of Spectre.css can be found in the [Official Spectre Documentation](https://picturepan2.github.io/spectre/elements.html)

### Headings

# H1 Heading `40px`

## H2 Heading `32px`

### H3 Heading `28px`

#### H4 Heading `24px`

##### H5 Heading `20px`

###### H6 Heading `16px`

```html
# H1 Heading
# H1 Heading `40px`</small>`

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

### Paragraphs

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

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

### Notices

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

```markdown
! This is a warning notification

!! This is a error notification

!!! This is a default notification

!!!! This is a success notification
```

 [ Previous Post](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/the-urban-jungle) [Next Post ](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/daring-fireball-link)

#### Related Posts

- 50 

     [Body & Hero Classes](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/hero-classes "Body & Hero Classes")
- 50 

     [DF Style Article Link](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/daring-fireball-link "DF Style Article Link")
- 50 

     [Random Thoughts](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/random-thoughts "Random Thoughts")
- 50 

     [DaringFireball Style Link](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/df-link "DaringFireball Style Link")

#### Random Article

 [ I'm Feeling Lucky!](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/random)

#### Some Text Widget

You can **edit** this by modifying the `modules/sidebar/default.md` page.

To **reorder** things in the sidebar you need to modify the `partials/sidebar.html.twig` template file.

#### Popular Tags

#### Archives

- [ 1 August 2017  ](https://demo.hibbittsdesign.org/grav-hypothesis-plugin//archives_month:aug_2017)
- [ 3 July 2017  ](https://demo.hibbittsdesign.org/grav-hypothesis-plugin//archives_month:jul_2017)
- [ 3 June 2017  ](https://demo.hibbittsdesign.org/grav-hypothesis-plugin//archives_month:jun_2017)
- [ 1 May 2017  ](https://demo.hibbittsdesign.org/grav-hypothesis-plugin//archives_month:may_2017)
- [ 1 July 2014  ](https://demo.hibbittsdesign.org/grav-hypothesis-plugin//archives_month:jul_2014)

#### Syndicate

 [ Atom 1.0](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/.atom) [ RSS](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/.rss)

---

## Navigation

- Parent: [Home](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/index.md)
- Previous: [DF Style Article Link](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/daring-fireball-link.md)
- Next: [The Urban Jungle](https://demo.hibbittsdesign.org/grav-hypothesis-plugin/blog/the-urban-jungle.md)