Styleguide

Styleguide

Examples of styling content without code samples in between.

Typography

Examples of typography

h1 Heading

The Fashionunited platform connects your website or application with the worldwide fashion conversation happening on Fashionunited.

h2 Heading

The Fashionunited platform connects your website or application with the worldwide fashion conversation happening on Fashionunited.

h3 Heading

The Fashionunited platform connects your website or application with the worldwide fashion conversation happening on Fashionunited.

h4 Heading

The Fashionunited platform connects your website or application with the worldwide fashion conversation happening on Fashionunited.

h5 Heading

The Fashionunited platform connects your website or application with the worldwide fashion conversation happening on Fashionunited.

h6 Heading

The Fashionunited platform connects your website or application with the worldwide fashion conversation happening on Fashionunited.

Subtitle1

Subtitle2

Body1 The Fashionunited platform connects your website or application with the worldwide fashion conversation happening on Fashionunited.

Body2 The Fashionunited platform connects your website or application with the worldwide fashion conversation happening on Fashionunited.

Overline

Button

Caption

Horizontal Rules

---

---

---

For typography pro’s: Smart quotes, mdash & ndash

mdash: — ndash: – regular hyphen: -

Emphasis

This is bold text

This is bold text

This is italic text

This is italic text

Strikethrough

Blockquotes

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between arrows.

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Marker character change forces new list start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
• Very easy!

Ordered

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. You can use sequential numbers…

5. …or keep all the numbers as 1.

Start numbering with offset:

57. foo
58. bar

Code

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Block code “fences”

Sample text here...

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Tables

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Right aligned columns

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Links

link text

link with title

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

Images

Like links, Images also have a footnote style syntax

With a reference later in the document defining the URL location:

Emojies

Unicode emojies are supported everywhere nowadays, use them: Unicode emoji list

Copy-paste from the browser column. Result:

😀

Unicode characters

► ˿ ॠ

All different ways of writing should work. For example, for Euro:

€ € € =

€ € €

Subscript / Superscript

• 19^th^
• H2O

<ins>

++Inserted text++

<mark>

==Marked text==

Footnotes

Footnote 1 link¹.

Footnote 2 link².

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference².

Definition lists

Term 1

: Definition 1 with lazy continuation.

Term 2 with inline markup

: Definition 2

    { some code, part of Definition 2 }

Third paragraph of definition 2.

Compact style:

Term 1 ~ Definition 1

Term 2 ~ Definition 2a ~ Definition 2b

Abbreviations

This is HTML abbreviation example.

It converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.

*[HTML]: Hyper Text Markup Language

Custom containers

::: warning here be dragons :::

Footnotes

1. Footnote can have markup

   and multiple paragraphs. ↩

2. Footnote text. ↩ ↩²