Create content

Content of each page is saved in .md file, which Jekyll understands and can creates proper HTML page with navigation and styles, which you can visit in your browser. File can look like this:

```
---
layout: page
title: My First Page
description: The description of page.
---

## Heading

Lorem ipsum
```

At the begging (between ---) each file contains Front Matter excerpt, which defines meta information about page. Rest of file contains content in Markdown syntax. See how to use Markdown.

Front Matter metadata	Description
layout	Defines which templates will be used for creating the page. Design system templates defines page, component and landing layout
title	Name of page, propagate to title of page.
description	Additional description
permalink	Additional url of page. If you don`t set, will be generated automatically (recommended)
group	Define group of page in navigation. See navigation
order	Define position in navigation. See navigation

Layouts

The Design system template contains several layouts, which defines character of a page. You can use:

• Page for simple content pages. Example
• Landing for overview of child pages. Example
• Component for component pages. The page contains live preview and code for your component. Example
• Pattern is not content page, but this layout is used for live previews of components.

Each layout can requires additional metadata in Front Matter. See below.

Basic page

If you want to create a new simple page, create a new file my-first-page.md in the project root folder with this content:

```
---
layout: page
title: My First Page
description: The description of page.
---

## Heading

Lorem ipsum
```

Then visit http://127.0.0.1:4000/my-first-page.html and see your first page.

Landing page

If you have list of components (or other group of pages), you can create summary page. This is landing page layout purpose.

```
---
layout: component-category
title: Overview
group: components
order: 1
permalink: /components/
description: Component overview description
---
```

You do not need to define content of page. Layout simple takes other page in group component and create summary from them (from title and description).

See example

Component page

Component page contains pattern preview and principles how to use component. To accomplish that you need to define .md file with component and pattern with HTML code.

Create component page components/button.md like that:

```
---
layout: component-detail
group: components

title: Button
description: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ante. Nulla pulvinar eleifend sem. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Aenean fermentum risus id tortor. Vivamus porttitor turpis ac leo.

variations:
- title: Primary buttons
  description: Description of standard pagination...
  pattern: button/button-primary.html
---

## Documentation

Lorem ipsum
```

Except general Front Matter metadata there are variations, which defines one or more patterns, you want to display. Each pattern should start with dash -. You have these options:

Variations attributes	Description
title	Name of pattern (required if you define several patterns in the component)
description	Description of pattern. Usually used (optional)
pattern	Path to HTML of pattern, relative to _patterns/ directory (required)
image	Linked image will be used instead of live pattern preview (optional)

Secondly you have to create pattern. See next chapter about Pattern

Patern

Pattern layout is not used for content pages, but it is used for live preview of HTML files. Another difference is patterns have to live in _patterns/ directory. If you continue with component example, you have to define pattern for button component. In our example create file _patterns/button/button-primary.html with content:

```
---
layout: pattern
---

<button type="button" class="btn btn-default btn-xs">Extra small</button>
<button type="button" class="btn btn-default btn-sm">Small</button>
<button type="button" class="btn btn-default">Normal</button>
<button type="button" class="btn btn-default btn-lg">Large</button>
```

This source code is provided by developers and is example of usage of component.

If you create files correctly, you will visit http://127.0.0.1:4000/components/button.html and see yours button component page and live preview of pattern. More examples you can find here

Note: Certainly, your patterns previews will need external CSS and JS files to render correctly. You should edit HTML template used for live preview in _layouts/pattern.html and add necessary assets (CSS, JS, fonts etc.) you need for display HTML correctly. The assets usually lives in assets/ folder.

Custom layouts

If you want to create your custom layout, you can. Just create new layout file in _layouts folder and use it in your page or pattern files. For instance you can define several types of patterns previews with different background color.