## Heading tag

Use different heading tags to create structure (defaults to h1).

```
<ds-heading>The quick brown fox</ds-heading>
<ds-heading tag="h2">The quick brown fox</ds-heading>
<ds-heading tag="h3">The quick brown fox</ds-heading>
<ds-heading tag="h4">The quick brown fox</ds-heading>
<ds-heading tag="h5">The quick brown fox</ds-heading>
<ds-heading tag="h6">The quick brown fox</ds-heading>
```

## Heading sizes

In case you need a different size you can set it independently from the heading tag.

```
<ds-heading size="h1">The quick brown fox</ds-heading>
<ds-heading size="h2">The quick brown fox</ds-heading>
<ds-heading size="h3">The quick brown fox</ds-heading>
<ds-heading size="h4">The quick brown fox</ds-heading>
<ds-heading size="h5">The quick brown fox</ds-heading>
<ds-heading size="h6">The quick brown fox</ds-heading>
```

## Heading variants

Use primary headings for important headlines, like a page title. Use soft headings for less important headlines.

```
<ds-heading primary>The quick brown fox</ds-heading>
<ds-heading soft>The quick brown fox</ds-heading>
```

## No Margin

You can remove the margin easily

```
<ds-heading no-margin>The quick brown fox</ds-heading>
<ds-heading no-margin>The quick brown fox</ds-heading>
```

## Text Align

Align text

```
<ds-heading align="left">The quick brown fox</ds-heading>
<ds-heading align="center">The quick brown fox</ds-heading>
<ds-heading align="right">The quick brown fox</ds-heading>
```
