-
Notifications
You must be signed in to change notification settings - Fork 42
Markdown cheatsheet
shixiedesign edited this page May 13, 2021
·
6 revisions
Table of contents
- Heading & paragraph styles
- This generates an H2 heading
- This generates an H3 heading
- Images
- Caption
- Lists
- Tables
- Code & syntax highlighting
This is a page template that you can use to style a new page to the Carbon for IBM.com website.
<PageDescription>
This is the styling for the large intro paragraph at the top of the page.
</PageDescription>
## This generates an H2 heading
### This generates an H3 heading
#### This generates an H4 heading.
**This is bold text.**
_This is italic text._
This is a normal paragraph with a [link](http://www.link.com).
> This is a block quote.
This generates a basic image at 12 columns:
![image alt text](images/name.png)
This generates images at different widths.
Change the cols=
value to 12
for full width images that span 12 columns or 8
for paragraph width image at 8 columns.
<Row>
<Column colLg={8}>
![image alt text](images/name.png)
</Column>
</Row>
This generates a fixed image for spec style tab images
<div className="image--fixed">
![image alt text](images/name.png)
</div>
This generates a caption:
<Caption>Insert caption content here.</Caption>
This is how to use a caption with an image component:
<Row>
<Column colLg={8}>
![image alt text](images/name.png)
<Caption>Insert caption content here.</Caption>
</Column>
</Row>
<div className="image--fixed">
![image alt text](images/name.png)
</div>
<Caption>Insert caption content here.</Caption>
* This is a bulleted list
* List item 2
- This is a bulleted list
- List item 2
| COL 1 | COL 2 | COL 3 |
|------------|---------|------------|
| Row 1A | Row 1B | Row 1C |
| Row 2A | Row 2B | Row 2C |
| Row 3A | Row 3B | Row 3C |
You can reference this table generator for easy table creation.
We support inline code and code blocks.
Inline `code` has `back-ticks around` it.
```
Blocks of code are fenced by lines with three back-ticks
```
Inline code
has back-ticks around
it.
Blocks of code are fenced by lines with three back-ticks
Publishing guidelines (6)
Layout component (37)
- CTA block
- CTA section
- Callout media
- Callout quote
- Callout
- Card group
- Card section carousel
- Card section images
- Card section offset
- Card section simple
- Card section
- Content block cards
- Content block horizontal
- Content block media
- Content block mixed groups
- Content block segmented
- Content block simple
- Content block
- Content group banner
- Content group cards
- Content group pictograms
- Content group simple
- Content group
- Content item horizontal
- Content item
- Content section
- Dotcom shell
- Feature section
- Lead space block
- Lead space search
- Lead space
- Link list section
- Logo grid
- Table of contents
- Tabs extended media
- Tabs extended
- Universal banner
Service (3)
UI component (34)
- Back to top
- Background media
- Button group
- CTA
- Card in card
- Card link
- Card
- Carousel
- Expressive modal
- Feature card
- Filter group
- Filter panel
- Footer
- Image with caption
- Image
- Input select
- Leaving ibm
- Lightbox media viewer
- Link list
- Link with icon
- Locale modal
- Masthead L0
- Masthead L1
- Masthead account
- Masthead mobile
- Masthead navigation
- Masthead
- Mega menu
- Pictogram item
- Quote
- Search typeahead
- Tag group
- Tag link
- Video