Styleguide

シェア

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（新しいタブで開く）

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="Dreams Universe™を始めようと思ったらこのページへ！ Dreams Universe™とは何か、Dreams Universe™を最大限に活用するにはどうすればいいかの情報が満載です。" image="https://assets.indreams.me/docs/images/uploads/game-info-thumb.jpg" title="ゲーム情報" url="/ja/game-info" />

ゲーム情報

Dreams Universe™を始めようと思ったらこのページへ！ Dreams Universe™とは何か、Dreams Universe™を最大限に活用するにはどうすればいいかの情報が満載です。

Medium PageLink#

<PageLink description="Dreams Universe™を始めようと思ったらこのページへ！ Dreams Universe™とは何か、Dreams Universe™を最大限に活用するにはどうすればいいかの情報が満載です。" image="https://assets.indreams.me/docs/images/uploads/game-info-thumb.jpg" size="medium" title="ゲーム情報" url="/ja/game-info" />

ゲーム情報

Dreams Universe™を始めようと思ったらこのページへ！ Dreams Universe™とは何か、Dreams Universe™を最大限に活用するにはどうすればいいかの情報が満載です。

Large PageLink#

<PageLink description="Dreams Universe™を始めようと思ったらこのページへ！ Dreams Universe™とは何か、Dreams Universe™を最大限に活用するにはどうすればいいかの情報が満載です。" image="https://assets.indreams.me/docs/images/uploads/game-info-thumb.jpg" size="large" title="ゲーム情報" url="/ja/game-info" />

ゲーム情報

Dreams Universe™を始めようと思ったらこのページへ！ Dreams Universe™とは何か、Dreams Universe™を最大限に活用するにはどうすればいいかの情報が満載です。