Section Overview Component

Details

The section overview component is used to provide a quick glance of content within a section of the site. It often contains a sample image, a small amount of descriptive text, then a set of links to individual pages within the section.

Code

<div class="bobshouse">
<div class="block drop-shadow full">
    <div class="container white">
        <p class="title">Medical School</p>
        <div class="content">
            <div class="parsys bobpar"><div class="bob section">
                <div class="left-column short">
                    <img class="float-left" src="url.png" alt="" title="" />
                </div>
                <div class="mobile right-column wide">
                    <p class="subhead">Medical School<span class="sub-info"></span></p>
                    <p>Find everything you need to know about family medicine during your medical education.</p>
                                        <ul class="half-list bold">
                                                <li><a target="_self" href="/medical-school-residency/medical-school/getting-in.html">Getting Into Medical School<span class="sub-info"></span></a></li>
                                                <li><a target="_self" href="/medical-school-residency/medical-school/expectations.html">Expectations<span class="sub-info"></span></a></li>
                                                <li><a target="_self" href="/medical-school-residency/medical-school/specialty.html">Specialty Choice<span class="sub-info"></span></a></li>
                                                <li><a target="_self" href="/medical-school-residency/medical-school/debt.html">Debt Management<span class="sub-info"></span></a></li>
                                                <li><a target="_self" href="/medical-school-residency/medical-school/rotations.html">Rotations &amp; Electives<span class="sub-info"></span></a></li>
                                        </ul>
                                        <ul class="half-list bold">
                                                <li><a target="_self" href="/medical-school-residency/medical-school/statistics.html">Medical School Statistics<span class="sub-info"></span></a></li>
                                                <li><a target="_self" href="/medical-school-residency/medical-school/training.html">Training Requirements<span class="sub-info"></span></a></li>
                                                <li><a target="_self" href="/medical-school-residency/medical-school/mentoring.html">Mentoring Resources<span class="sub-info"></span></a></li>
                                                <li><a target="_self" href="/medical-school-residency/medical-school/minority.html">Minority Medical Student Resources<span class="sub-info"></span></a></li>
                                        </ul>
                </div>
                <div class="clearfix"></div>
            </div></div>
        </div>
    </div>
</div>
</div>

Sample title

Sample content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in purus nisi. Nulla tempor lectus eget massa semper non cursus magna eleifend. Ut tempor scelerisque imperdiet. Etiam lacinia pretium felis quis ultrices. Aliquam blandit molestie dui, non aliquet nunc tempor sit amet. Donec porttitor sapien id est tempor scelerisque. Aenean eget neque leo. Quisque vel ipsum in lorem mattis egestas. Morbi non lacus sed diam euismod iaculis. Etiam sollicitudin metus convallis quam elementum pulvinar sit amet et metus. Curabitur suscipit tempus consequat. Aliquam dui est, auctor ac posuere et, pellentesque eu lacus.

Image Example

Live Example

Sample Section Overview Component

Sample content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in purus nisi. Nulla tempor lectus eget massa semper non cursus magna eleifend. Ut tempor scelerisque imperdiet. Etiam lacinia pretium felis quis ultrices. Aliquam blandit molestie dui, non aliquet nunc tempor sit amet. Donec porttitor sapien id est tempor scelerisque. Aenean eget neque leo. Quisque vel ipsum in lorem mattis egestas. Morbi non lacus sed diam euismod iaculis. Etiam sollicitudin metus convallis quam elementum pulvinar sit amet et metus. Curabitur suscipit tempus consequat. Aliquam dui est, auctor ac posuere et, pellentesque eu lacus.