These are the built in components that you’ll have access to simply by using markdown. The whitespace around these components is significant. If you encounter any errors, make sure you format the markdown and surounding space properly.

Text decoration

Emphasis, aka italics, with asterisks or underscores. Strong emphasis, aka bold, with asterisks or underscores. Combined emphasis with asterisks and underscores. Strikethrough uses two tildes. ~~Scratch this.~~

Code

Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~

Headers

Since the h1 role effectively consumed by the page header, we now style h1 tags identically to h2 tags, except h1s have no margin-top.

This means the start of your content be either a PageDescription or an h1 tag (single #). We recommend the former. For most content, we think PageDescription → AnchorLinks creates a nice hierarchy.

H1

H2

H3

H4

H5

Code

# H1
## H2
### H3
#### H4
##### H5

Lists

First ordered list item
Another item
Actual numbers don’t matter, just that it’s a number
And another item.

Unordered list can use asterisks *
Or minuses - to create list items

Code

1. First ordered list item
2. Another item
3. Actual numbers don't matter, just that it's a number
4. And another item.

- Unordered list can use asterisks `*`
- Or minuses `-` to create list items

Links

I’m a local link

I’m a markdown link

I’m a markdown link with title

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Code

[I'm a markdown link](https://www.carbondesignsystem.com)

[I'm a markdown link with title](https://www.carbondesignsystem.com "Google's Homepage")

[I'm a local link](/components/demo)

URLs and URLs in angle brackets will automatically get turned into links.
http://www.example.com or <http://www.example.com> and sometimes
example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Images

Code

![Alt text](../../images/blossom.jpg)

Inline code and code blocks

Inline code has back-ticks around it.

Blocks of code have three back-ticks above and below

Code

Inline `code` has `back-ticks around` it.

\```
Blocks have three back-ticks above and below.
Pretend the backslashes aren't there.
\```

Tables

Colons can be used to align columns.

Tables	Are	Cool
col 3 is	right-aligned	1
col 2 is	centered	2

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown	Less	Pretty
Still	`renders`	nicely
1	2	3

Code

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Blockquotes

This is a Blockquote This line is part of the same quote.

Code

> This is a Blockquote
> This line is part of the same quote.

Home

Components: Demo