
                <article class="content typography-page">
                    <div class="title-block">
                        <h3 class="title"> Typography </h3>
                    </div>
                    <section class="section">
                        <div class="row sameheight-container">
                            <div class="col-md-4">
                                <div class="card sameheight-item">
                                    <div class="card-block">
                                        <div class="card-title-block">
                                            <h3 class="title"> Headings </h3>
                                        </div>
                                        <section class="section">
                                            <h1>Heading 1 <small>Sub-heading</small>
                                            </h1>
                                            <h2>Heading 2 <small>Sub-heading</small>
                                            </h2>
                                            <h3>Heading 3 <small>Sub-heading</small>
                                            </h3>
                                            <h4>Heading 4 <small>Sub-heading</small>
                                            </h4>
                                            <h5>Heading 5 <small>Sub-heading</small>
                                            </h5>
                                            <h6>Heading 6 <small>Sub-heading</small>
                                            </h6>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card sameheight-item">
                                    <div class="card-block">
                                        <div class="card-title-block">
                                            <h3 class="title"> Paragraphs </h3>
                                        </div>
                                        <section class="section">
                                            <p class="lead">This is an example of lead body copy.</p>
                                            <p>This is an example of standard paragraph text. This is an example of <a href="javascript:void(0);">link anchor text</a> within body copy.</p>
                                            <p>
                                                <small>This is an example of small, fine print text.</small>
                                            </p>
                                            <p>
                                                <strong>This is an example of strong, bold text.</strong>
                                            </p>
                                            <p>
                                                <em>This is an example of emphasized, italic text.</em>
                                            </p>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card sameheight-item">
                                    <div class="card-block">
                                        <div class="card-title-block">
                                            <h3 class="title"> Emphasis Classes </h3>
                                        </div>
                                        <section class="section">
                                            <p class="text-muted">This is an example of muted text.</p>
                                            <p class="text-primary">This is an example of primary text.</p>
                                            <p class="text-success">This is an example of success text.</p>
                                            <p class="text-info">This is an example of info text.</p>
                                            <p class="text-warning">This is an example of warning text.</p>
                                            <p class="text-danger">This is an example of danger text.</p>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="section">
                        <div class="row sameheight-container">
                            <div class="col-md-4">
                                <div class="card sameheight-item">
                                    <div class="card-block">
                                        <div class="card-title-block">
                                            <h3 class="title"> Abbreviations </h3>
                                        </div>
                                        <section class="section">
                                            <p>The abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
                                            <p>
                                                <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>is an abbreviation for a programming language.</p>
                                            <br>
                                            <h4>Addresses</h4>
                                            <address>
                                                <strong>Twitter, Inc.</strong>
                                                <br>795 Folsom Ave, Suite 600 <br>San Francisco, CA 94107 <br>
                                                <abbr title="Phone">P:</abbr>(123) 456-7890</address>
                                            <address>
                                                <strong>Full Name</strong>
                                                <br><a href="mailto:#">first.last@example.com</a>
                                            </address>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card sameheight-item">
                                    <div class="card-block">
                                        <div class="card-title-block">
                                            <h3 class="title"> Blockquotes </h3>
                                        </div>
                                        <section class="section">
                                            <h4>Default Blockquote</h4>
                                            <blockquote>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                            </blockquote>
                                            <h4>Blockquote with Citation</h4>
                                            <blockquote>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                                <small>Someone famous in <cite title="Source Title">Source Title</cite>
                                                </small>
                                            </blockquote>
                                            <h4>Right Aligned Blockquote</h4>
                                            <blockquote class="pull-right">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                            </blockquote>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card sameheight-item">
                                    <div class="card-block">
                                        <div class="card-title-block">
                                            <h3 class="title"> Lists </h3>
                                        </div>
                                        <section class="section">
                                            <h4>Unordered List</h4>
                                            <ul>
                                                <li>List Item</li>
                                                <li>List Item</li>
                                                <li>
                                                    <ul>
                                                        <li>List Item</li>
                                                        <li>List Item</li>
                                                        <li>List Item</li>
                                                    </ul>
                                                </li>
                                                <li>List Item</li>
                                            </ul>
                                            <h4>Ordered List</h4>
                                            <ol>
                                                <li>List Item</li>
                                                <li>List Item</li>
                                                <li>List Item</li>
                                            </ol>
                                        </section>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </article>
                

