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 have following structure:

```
---
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.

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)
order	Define position in navigation.
group	Define group of page in navigation

Rest of file contains content in Markdown syntax. See how to use Markdown.

Layouts

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

• Page for simple content pages. Example
• Component for component pages. The page contains live preview and code for your component. Example
• Landing for overview of child pages. Example

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

Basic page

If you want to create a new simple page:

1. 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
   

2. Go to http://127.0.0.1:4000/my-first-page.html and see your first page.

Component page

See more examples

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.

Firstly create component page 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 in _patterns/ directory. Create file with name you defined with 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.