TOPIC_TEMPLATE

---
title: Basic template
---

Introductory text that gives an overview of the topic you will be writing about.

The purpose of this page is to provide you with a pre-formatted template and useful [markdown](https://glossary.magento.com/markdown) references to help you get started writing docs.

You can start by editing the local version of this file using markdown language (and [HTML](https://glossary.magento.com/html) where needed). Then, create a pull request (PR) to have your contribution reviewed by the Docs team.

## Metadata parameters

Add the following metadata parameters at the top of your page. We use YAML for the metadata in front matter. We use this data when generating the DevDocs for the following:

Parameter | Description
--- | ---
`title:` | The title of the page.
`group:` | Optional. The table of contents this file belongs to if it does not follow the default for its directory. The group maps to files located in `_data/toc/`. Only add the name of the file without the extension. For example, if the group of the file is `group: getting-started`, it points to the table of contents defined in `_data/toc/getting-started.yml`.
`redirect_from` | Optional. Add a list of other pages in the User Guide that should redirect to this page.
`ee_only:` | Optional. If set to `true`, graphics/cues display on the page indicating it applies to the Magento Commerce product and is not included with Open Source installations.
`b2b_only:` | Optional. If set to `true`, graphics/cues display on the page indicating it applies to the Magento Commerce product with the B2B extension installed and configured.

If you need help with metadata, we can assist!

## Basic markdown syntax {#basic}

Below are some basic examples of what you can do with markdown.

### Text effects {#text}

| Example           | Output       |
| ----------------- | ------------ |
|`_emphasis_`       | _emphasis_   |
|`**bold**`         | **bold**     |
|`` `inline code` ``| `inline code`|

Use code fences to create code blocks. For extensive examples of adding code samples, see [Code blocks](#code-blocks).

```text
//This is a code block!
print "Hello World!";
```

For more examples of basic markdown please follow this [link](https://daringfireball.net/projects/markdown/syntax){:target="_blank"}.

### Lists {#lists}

Lists are useful for organizing and displaying related items. Below are examples of a bulleted list and an ordered list.

#### Bulleted list

```markdown
- List Item 1
- List Item 2
- List Item 3
```

Output:

-  List Item 1
-  List Item 2
-  List Item 3

#### Ordered list

```markdown
1. First Step
1. Second Step
1. Third Step
```

Output:

1. First Step
1. Second Step
1. Third Step

### Images {#images}

Add any images you may need to the [`src/images`](https://github.com/magento/merchdocs/tree/master/src/images) directory.

When the image is added, you can use it in your documentation:

Example: `![Image example]({% link magento/assets/commerce-account-login.png %})`

Output:

![Image example]({{ site.baseurl }}/src/magento/assets/commerce-account-login.png)

You can even scale the image if it is too large:

Example: `![Scaled Image]({{ site.baseurl }}/src/magento/assets/commerce-account-login.png){:width="446"}`

Output:

![Scaled Image Example]({{ site.baseurl }}/src/magento/assets/commerce-account-login.png){:width="446"}

### Tables {#tables}

Tables can be useful for displaying different kinds of data in an organized way.

Example:

```markdown
<!-- Basic Markdown Table Syntax -->
| Column Heading | Column Heading | Column Heading |
|----------------|----------------|----------------|
| Data 1         | Data 2         | Data 3         |
| Data 4         | Data 5         |                |
| Data 6         |                |                |
```

Output:

| Column Heading | Column Heading | Column Heading |
|----------------|----------------|----------------|
| Data 1         | Data 2         | Data 3         |
| Data 4         | Data 5         |                |
| Data 6         |                |                |

You can read more about table syntax [here](http://kramdown.gettalong.org/syntax.html#tables){:target="_blank"}.

## Advanced syntax {#advanced}

### Callout Messages {#callouts}

Use these messages to highlight or bring attention to a piece of information.

#### Notes

```
{%raw%}
{:.bs-callout-info}
This is a note callout. You can use these to provide important information on a topic.
{%endraw%}
```

Output:

{:.bs-callout-info}
This is a note callout. You can use these to provide important information on a topic.

#### Warnings

```
{%raw%}
{:.bs-callout-warning}
This is a warning callout. This can be used to convey important information to the reader.
{%endraw%}
```

Output:

{:.bs-callout-warning}
This is a warning callout. This can be used to convey important information to the reader.

#### Tips

```
{%raw%}
{:.bs-callout-tip}
This is a tip callout. These can be used to provide useful tips or interesting facts on a topic.
{%endraw%}
```

Output:

{:.bs-callout-tip}
This is a tip callout. These can be used to provide useful tips or interesting facts on a topic.

### Collapsible content {#collapsible}

You can use the collapsible content tag for large code samples in your content. Any content in a collapse is blocked from searching on page.

{:.bs-callout-info}
The `{%raw%}{% collapsible %}{%endraw%}` tag must be preceded by a blank line.

Example:

```liquid
{%raw%}
{% collapsible This is the title %}
Markdown content goes in this area.
{% endcollapsible %}
{%endraw%}
```

*Output:*

{% collapsible This is the title %}
Markdown content goes in this area.
{% endcollapsible %}

### Code blocks {#code-blocks}

Code blocks can also be defined using [Rouge formatting](http://rouge.jneen.net/){:target="_blank"}. View the .md file of this template for examples.

For inline code, surround the content with single backticks: `` `example` ``.

For blocks of code, surround content with three backticks and a [supported language](https://GitHub.com/jneen/rouge/wiki/List-of-supported-languages-and-lexers){:target="_blank"}.

Example:

```text
<div class="container">
  <h4 class="title">Title</h4>
  <div class="content">
    <p>Paragraph content.</p>
  </div>
</div>
```

Output:

```html
<div class="container">
  <h4 class="title">Title</h4>
  <div class="content">
    <p>Paragraph content.</p>
  </div>
</div>
```