﻿<section class="section">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#stack">Alert stack</a>
        </h1>
    </header>

    <div class="row">
        <div class="col-xs-24">
            <p>These are the full width alerts you see stacked above.</p>
        </div>
        <div class="col-xs-24">

            {{#markdown}}
```xml
<!-- This tag should be a child of the body -->
<div class="alert-stack">

    <div class="alert alert-warning alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
        </button>

        <div class="container">
            <div class="row">
                <div class="col-md-20">
                    <p>Alert example. If your playback didn’t start, it’s likely because you don’t have the Video app installed.</p>
                </div>
                <div class="col-md-4">
                    <p>
                        <a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
                        <a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- We can stack other alert components here -->
</div>
```
            {{/markdown}}

            <p>The required JavaScript to initialize the <a href="http://getbootstrap.com/javascript/#affix" target="_blank">Affix Boostrap component</a>:</p>

            {{#markdown}}
```javascript
$(function () {
    var alertStack = $('.alert-stack');

    if (alertStack.length == 0) {
        return;
    }

    alertStack.affix({
        offset: {
            top: alertStack.offset().top
        }
    });
});
```
            {{/markdown}}

        </div>
    </div>
</section>

<section class="section" id="inline">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#inline">Inline alert</a>
        </h1>
    </header>

    <div class="row">
        <div class="col-xs-24">
            <p>Caption row uses two columns to ensure action link is right aligned at md viewport and up. It stacks at sm and below.</p>
            <p>Action link needs to float right on large viewports and float left on small ones, hence the hiding and showing.</p>
        </div>
        <div class="col-xs-24">

            <div class="alert alert-info alert-dismissible m-t-xs fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
                </button>
                <div class="row">
                    <div class="col-md-20">
                        <p>This is an inline alert with no title.</p>
                    </div>
                    <div class="col-md-4">
                        <p>
                            <a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
                            <a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="alert alert-warning alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
                </button>
                <div class="alert-title">Warning example</div>
                <div class="row">
                    <div class="col-md-20">
                        <p>This is a warning inline alert without an glyph.</p>
                    </div>
                    <div class="col-md-4">
                        <p>
                            <a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
                            <a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="alert with-glyph alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
                </button>
                <span class="alert-glyph"><i class="glyph-info"></i></span>
                <div class="alert-title">Danger alert with glyph example</div>
                <div class="row">
                    <div class="col-md-20">
                        <p>This is a danger inline alert with a glyph. Want to know more about what glyphs you can use?</p>
                    </div>
                    <div class="col-md-4">
                        <p>
                            <a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
                            <a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
                        </p>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="alert [alert-info] [alert-warning] [alert-danger] [with-glyph] alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">
            <i class="glyph glyph-cancel"></i>
        </span>
    </button>
    <span class="alert-glyph">
        <i class="glyph-info"></i>
    </span>
    <div class="alert-title">Danger alert with glyph example</div>
    <div class="row">
        <div class="col-md-20">
            <p>This is a danger inline alert with an glyph. Want to know more about what glyphs you can use?</p>
        </div>
        <div class="col-md-4">
            <p>
                <a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
                <a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
            </p>
        </div>
    </div>
</div>
```
            {{/markdown}}

        </div>
    </div>
</section>
