Multi Column with Section Heading - (Flex-Wrapper)

(Flex Rapper for Equal Height Columns)

Header style number one

Temporibus tenetur unde aut quasi aliquid quas impedit possimus voluptatum inventore delectus ratione, nobis ullam modi quia molestias.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae et, voluptas, officiis nisi ratione in deleniti quia quidem labore blanditiis corporis molestias aspernatur. Consectetur ipsum, adipisci repellendus nobis velit!

Button Button Two Button Extended

Header Style Four

Markup

<div class="row">
            <div class="flex-wrapper flex-columns">
                <div class="col-md-8 flex-item">
                    <div class="card general-content">
                        <div class="copy-wrap">
                            <h1>Header style number one</h1>
                            <p class="support-text">Temporibus tenetur unde aut quasi aliquid quas impedit possimus
                                voluptatum inventore delectus ratione, nobis ullam modi quia molestias.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae et, voluptas,
                                officiis
                                nisi ratione in deleniti quia quidem labore blanditiis corporis molestias aspernatur.
                                Consectetur ipsum, adipisci repellendus nobis velit!</p>
                            <a href="#" class="button-link button-link-default">Button</a>
                            <a href="#" class="button-link button-link-default alt">Button Two</a>
                            <a href="#" class="button-link button-link-ext">
                                Button Extended
                                <i class="icon icon-arrow">
                                    <svg>
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/spritemap.svg#icon-arrow-right"></use>
                                        <svg>
                                </svg></svg></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 flex-item">
                    <div class="card">
                        <div class="section-heading red">
                            <i class="icon icon-brand icon-aaa">
                                <svg>
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/spritemap.svg#aaa-logo"></use>
                                    <svg>
                            </svg></svg></i>
                            <h2>Header Style Four</h2>
                        </div>
                        <div class="copy-wrap">
                            <form action="" class="login-form">
                                <div class="form-block">
                                    <label for="login-username" class="visuallyhidden">Username</label>
                                    <input type="text" class="form-input" id="login-username" name="login-username" placeholder="username">
                                </div>
                                <div class="form-block">
                                    <label for="login-password" class="visuallyhidden">Pasword</label>
                                    <input type="password" class="form-input" id="login-password" name="login-password" placeholder="password">
                                </div>
                                <div class="login-form-actions">
                                    <button type="submit" class="button-link button-link-default alt">Button Two &gt;</button>
                                    <a href="#" class="forgot-password">forgot password</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Multi Column with Section Heading (No Flex-Wrapper)

Header style number one

Temporibus tenetur unde aut quasi aliquid quas impedit possimus voluptatum inventore delectus ratione, nobis ullam modi quia molestias.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae et, voluptas, officiis nisi ratione in deleniti quia quidem labore blanditiis corporis molestias aspernatur. Consectetur ipsum, adipisci repellendus nobis velit!

Button Button Two Button Extended

Header Style Four

Markup

<div class="row">
            <div class="col-md-8">
                <div class="card general-content">
                    <div class="copy-wrap">
                        <h1>Header style number one</h1>
                        <p class="support-text">Temporibus tenetur unde aut quasi aliquid quas impedit possimus
                            voluptatum inventore delectus ratione, nobis ullam modi quia molestias.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae et, voluptas, officiis
                            nisi ratione in deleniti quia quidem labore blanditiis corporis molestias aspernatur.
                            Consectetur ipsum, adipisci repellendus nobis velit!</p>
                        <a href="#" class="button-link button-link-default">Button</a>
                        <a href="#" class="button-link button-link-default alt">Button Two</a>
                        <a href="#" class="button-link button-link-ext">
                            Button Extended
                            <i class="icon icon-arrow">
                                <svg>
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/spritemap.svg#icon-arrow-right"></use>
                                    <svg>
                            </svg></svg></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="section-heading red">
                    <i class="icon icon-brand icon-aaa">
                        <svg>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/spritemap.svg#aaa-logo"></use>
                            <svg>
                    </svg></svg></i>

                    <h2>Header Style Four</h2>
                </div>
                <div class="well-block card">
                    <div class="content-wrap">
                        <form action="" class="login-form">
                            <div class="form-block">
                                <label for="login-username" class="visuallyhidden">Username</label>
                                <input type="text" class="form-input" id="login-username" name="login-username" placeholder="username">
                            </div>
                            <div class="form-block">
                                <label for="login-password" class="visuallyhidden">Pasword</label>
                                <input type="password" class="form-input" id="login-password" name="login-password" placeholder="password">
                            </div>
                            <div class="login-form-actions">
                                <button type="submit" class="button-link button-link-default alt">Button Two &gt;</button>
                                <a href="#" class="forgot-password">forgot password</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>