<div class="row" id="headings">
    <div class="col-xs-24">
        <div class="row">
            <div class="col-xs-24">
                <h2>Headings</h2>
                <p>Winstrap headings are responsive. By default, <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code> are mapped to Winstrap heading controls.</p>
                <p>You can also apply headings using the Sass mixin. Headings applied using the mixin are not responsive by default. Pass the <code>responsive</code> argument to make them responsive.</p>
            </div>
        </div>

        <div class="row m-t-sm">
            <div class="col-md-12">
                <h1>Heading 1</h1>
                <h2>Heading 2</h2>
                <h3>Heading 3</h3>
                <h4>Heading 4</h4>
                <h5>Heading 5</h5>
                <h6>Heading 6</h6>
            </div>

            <div class="col-md-12">
                <div class="row">
                    <div class="col-sm-24">
                        {{#markdown}}
```xml
<h1>Heading 1</h1>
<div class="h1">...</div>
<div class="type-h1">...</div>

<h2>Heading 2</h2>
<div class="h2">...</div>
<div class="type-h2">...</div>

<h2>Heading 3</h2>
<div class="h3">...</div>
<div class="type-h3">...</div>

<h2>Heading 4</h2>
<div class="h4">...</div>
<div class="type-h4">...</div>

<h2>Heading 5</h2>
<div class="h5">...</div>
<div class="type-h5">...</div>

<h2>Heading 6</h2>
<div class="h6">...</div>
<div class="type-h6">...</div>
```
                        {{/markdown}}
                    </div>

                    <div class="col-sm-24">
                        {{#markdown}}
```scss
.selector {
    @include type-control(h[1-6], [responsive]);
}
```
                        {{/markdown}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
