Aileron

Divider usage

Section dividers:

<hr class="divider--section">

Subsection dividers:

<hr class="divider--subsection divider--dashed">

Dividers with text:

This is a paragraph.

Stop Over: Los Angeles, CA (LAX)

This is another paragraph.

<div data-dependency="The divider text background color is inherited so its container must set a background color explicitly in CSS" style="background-color: #fff;">
<p data-display="This is for preview only, not part of template">This is a paragraph.</p>
<div class="divider--subsection divider--dashed divider--with-text">
    <span class="divider__text divider__text--warning"> Stop Over: Los Angeles, CA (<abbr title="Los Angeles International Airport">LAX</abbr>) </span>
</div>
<p data-display="This is for preview only, not part of template">This is another paragraph.</p>
</div>

<h1>This is an H1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<section aria-labelledby="sec1hd">
    <h2 id="sec1hd">Section 1 heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<hr class="divider--section divider--shadow" aria-hidden="true">
<section aria-labelledby="sec2hd">
    <h2 id="sec2hd">Section 2 heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div aria-labelledby="subsec1hd">
        <h3 id="subsec1hd">Subsection 1 heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <hr class="divider--subsection divider--solid" aria-hidden="true">
    <div aria-labelledby="subsec2hd">
        <h3 id="subsec2hd">Subsection 2 heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <hr class="divider--subsection divider--dashed" aria-hidden="true">
    <div aria-labelledby="subsec3hd">
        <h3 id="subsec3hd">Subsection 3 heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <hr class="divider--subsection divider--solid">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <hr class="divider--subsection divider--solid">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</section>
<hr class="divider--section divider--shadow" aria-hidden="true">
<section style="background-color: #fff">
    <h2>Divider with text example</h2>
    <p>Basic style</p>
    <div class="divider--subsection divider--dashed divider--with-text">
        <span class="divider__text divider__text"> Subsection divider text over dashes </span>
    </div>
    <p>Warning style</p>
    <div class="divider--subsection divider--dashed divider--with-text">
        <span class="divider__text divider__text divider__text--warning"> Subsection divider warning text over dashes </span>
    </div>
</section>
<hr class="divider--section divider--shadow" aria-hidden="true">
<section aria-labelledby="sec3hd">
    <h2 id="sec3hd">Section 3 heading</h2>
    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
    </ul>
    <div class="grid-x grid-margin-x">
        <div class="cell medium-5" style="background-color: #f5f5f7; color: #36495a; padding: 20px 15px;">
            <h2 id="fromToCities">
                <span id="fsDepartureCity">Dallas/ Fort Worth</span> to
                <span id="fsArrivalCity">Phoenix</span>
            </h2>
            <h3>
                <span id="fsFlightInfoDepart">Monday, April 15, 2019</span>
            </h3>
            <hr class="divider--subsection divider--dashed" aria-hidden="true">
            <div class="departArriveTimes">
                <div class="grid-x">
                    <div class="cell large-5">
                        <span id="fsFlightInfoDepartureTime" style="font-size: 27px;">6:00 AM</span>
                        <div id="fsDepartCityCode" class="cityCode" style="font-size: 16px;">DFW</div>
                    </div>
                    <div class="cell large-2">
                        <div class="margin-top -small">
                            <span class="icon-arrow-right icon-medium arrowStyle" aria-hidden="true" style="color: #9da6ab; padding-left: 5px; padding-right: 20px;"></span>
                        </div>
                    </div>
                    <div class="cell large-5">
                        <span id="fsFlightInfoArrivalTime" style="font-size: 27px;">6:34 AM</span>
                        <div id="flightInfoTo1" class="cityCode" style="font-size: 16px;">PHX</div>
                    </div>
                </div>
            </div>
            <div class="flightInfoAirline" style="padding-top: 15px">
                <img src="//www.aa.com/content/images/reservations/aa_mini_logo.gif" alt="American Airlines Icon" width="15" height="15">&nbsp;
                <span id="fsFlightNumber" class="flightNumber">812</span>
                <span id="fsFlightInfoAirlineName">American Airlines</span><br>
            </div>
        </div>
    </div>
</section>
<hr class="divider--section divider--shadow" aria-hidden="true">
<div class="grid-x grid-margin-x">
    <div class="cell small-12 medium-6 large-3 large-offset-9 medium-order-2">
        <button type="button" name="" id="btn1" class="button primary expanded">
            Continue
        </button>
    </div>
</div>