Styleguide

Share

Typography#

# Heading 1

Heading 1

# Heading 2

Heading 2#

# Heading 3

Heading 3#

# Heading 4

Heading 4#

# Heading 5

Heading 5#

*bold*

bold

*italics*

italics

> blockquote

blockquote

Lists#

Ordered list#

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item

1. First item
2. Second item
3. Third item
   1. Indented item
   2. Indented item
4. Fourth item

Unordered list#

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

• First item
• Second item
• Third item
  • Indented item
  • Indented item
• Fourth item

Tables#

| Type | Icon Shape |
| --- |---|
| Dream | Rectangle |
| Element | Hexagon |
| Scene | Round |
| Collection | Assorted |
| Photo | Rectangle |

Type	Icon Shape
Dream	Rectangle
Element	Hexagon
Scene	Round
Collection	Assorted
Photo	Rectangle

Images#

!<Link href="https://assets.indreams.me/docs/images/placeholders/screenshots/dreams-ps4-earlyaccess-screenshot-01.jpg" rel="noopener noreferrer" target="_blank">Dreams Early Access Level Zero</Link>

!Dreams Early Access Level Zero(opens in new tab)

Horizontal rules#

***
---

---

---

Links#

My favorite search engine is <Link href="https://duckduckgo.com" rel="noopener noreferrer" target="_blank">Duck Duck Go</Link>.

Custom elements#

Icons#

Icons from the DreamsIcons font can be embedded simply and easily using their shorthand codes, as they are in-game.

Icon examples: <Icon name="uiplay" /> <Icon name="uiwaveramp" /> <Icon name="uiplay" /> <Icon name="dualshock3d" />

Icon examples:

Videos#

The Video component allows for embedding of youtube videos easily. The URL to the video is included and a title can be set.

<Video url="https://www.youtube.com/embed/LwXtOubMA7I" title="Mm Jams #5" />

Images#

The Image component lets authors easily embed images in to a document. Images do need to be hosted somewhere, checked in to the project is preferable.

<Image url="/placeholders/screenshots/dreams-ps4-earlyaccess-screenshot-02.jpg" title="Dreams screenshot">
  A _Dreams_ screenshot
</Image>

<Image url="/placeholders/screenshots/dreams-ps4-earlyaccess-screenshot-03.jpg" title="Dreams screenshot" size="small">
  A _Dreams_ screenshot
</Image>

<Image url="/placeholders/screenshots/dreams-ps4-earlyaccess-screenshot-04.jpg" title="Dreams screenshot" size="small" align="center">
  A _Dreams_ screenshot
</Image>

<Image url="/placeholders/screenshots/dreams-ps4-earlyaccess-screenshot-05.jpg" title="Dreams screenshot" size="small" align="right">
  A _Dreams_ screenshot
</Image>

Image as an aside#

The aside type option allows the image to be offset from the body of the article, at larger screen sizes.

<Image url="/placeholders/screenshots/dreams-ps4-earlyaccess-screenshot-03.jpg" title="Aside Dreams screenshot" type="aside">
  Aside _Dreams_ screenshot
</Image>

Page links#

A PageLink component provides a way of easily linking to another page in the User Guide, and automatically including the appropriate text and associated page image. PageLinks can be served in 3 sizes: small (default), medium and large.

Small PageLink#

<PageLink description="Looking to get into Dreams? Then this page, with features showing you what Dreams is and how to get the most out of it, is for you!" image="https://assets.indreams.me/docs/images/uploads/game-info-thumb.jpg" title="Game Info" url="/en/game-info" />

Game Info

Looking to get into Dreams? Then this page, with features showing you what Dreams is and how to get the most out of it, is for you!

Medium PageLink#

<PageLink description="Looking to get into Dreams? Then this page, with features showing you what Dreams is and how to get the most out of it, is for you!" image="https://assets.indreams.me/docs/images/uploads/game-info-thumb.jpg" size="medium" title="Game Info" url="/en/game-info" />

Game Info

Looking to get into Dreams? Then this page, with features showing you what Dreams is and how to get the most out of it, is for you!

Large PageLink#

<PageLink description="Looking to get into Dreams? Then this page, with features showing you what Dreams is and how to get the most out of it, is for you!" image="https://assets.indreams.me/docs/images/uploads/game-info-thumb.jpg" size="large" title="Game Info" url="/en/game-info" />

Game Info

Looking to get into Dreams? Then this page, with features showing you what Dreams is and how to get the most out of it, is for you!