Markdown
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.
For most pages, we recommend starting with a PageDescription followed by AnchorLinks if the content is long enough.
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
Note: It’s generally considered best practice to include just one h1 heading per page. This heading signals the title or primary subject matter of the content to your audience. Because the title component generated at the top of each page already uses an h1 heading, we recommend using h2 tags for section headings within your content.
H2
H3
H4
H5
Code
## H2
### H3
#### H4
##### H5
Lists
- First ordered list item
- Another item
- Nested items
- Actual numbers don’t matter, just that it’s a number
- Unordered list can use asterisks
- Or hyphens to create list items
Code
1. First ordered list item
2. Another item
1. Nested items
3. Actual numbers don't matter, just that it's a number
* Unordered list can use asterisks
- Or hyphens to create list items
Links
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
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 and citations
It is more important than ever that we own our own ethos, make palpable our brand values, and incorporate an instantly identifiable IBMness in everything we do.
This is a Blockquote. This line is part of the same quote.
– Allison
It is more important than ever that we own our own ethos, make palpable our brand values, and incorporate an instantly identifiable IBMness in everything we do.
Code
> This is a Blockquote.
> This line is part of the same quote.
> <cite>– Allison</cite>