Health Design System

Band: Image Text Horizontal

Bands

Group components on full width landing pages

Landing pages are made up of several bands that provide a snapshot into further information. For example a Latest news band with the latest 3 news items.

<div class="health-band health-band--image-text-horizontal">
    <div class="health-band__container">
        <div class="row standard-gap">
            <div class="col-sm-2">
                <div class="health-band__image  health-band__image--image-text-horizontal">
                    <svg viewBox="0 0 86 70" xmlns="http: //www.w3.org/2000/svg">
                        <g stroke="#222829" stroke-width="2.15" fill="none" fill-rule="evenodd" stroke-linejoin="round">
                            <path d="M35 63.333H7V2h30.667L43 7.333 48.333 2H79v61.333H51" />
                            <path d="M79.333 7h5.334v61.333H47.333v-4c0-2.208-1.792-4-4-4s-4 1.792-4 4v4H2V7h5.333" />
                            <path d="M21 27c0 2.208-1.792 4-4 4s-4-1.792-4-4 1.792-4 4-4 4 1.792 4 4zM37 27c0 2.208-1.792 4-4 4s-4-1.792-4-4 1.792-4 4-4 4 1.792 4 4zM29 14c0 2.208-1.792 4-4 4s-4-1.792-4-4 1.792-4 4-4 4 1.792 4 4zM49 10.333h26.667M49 15.333h26.667M49 50.333h26.667M49 44.333h26.667M49 55.333h26.667M11 39.333h26.667M11 44.333h26.667M11 50.333h26.667M11 55.333h26.667M22 17l-4 6.667M27 17l4 6.667M29 27.333h-8M75.333 39H50V19M55 39v-4M61 39v-4M66 39v-4M71 39v-4" />
                            <path d="M50 28.667h4l5.333-5.334 5.334 5.334L71.333 22h4M43 11v45.333" />
                        </g>
                    </svg>
                </div>
            </div>
            <div class="col-sm-10 standard-gap--mobile-only">
                <h2>Archaeopteryx</h2>
                <p>All described specimens of Sinosauropteryx preserve integumentary structures (filaments arising from the skin) which most palaeontologists interpret as very primitive type of feathers. These short, down-like filaments are preserved along the back half of the skull, the arms, neck, back, and top and bottom of the tail. </p>
                <ul>
                    <li>Despite its feathers, most palaeontologists do not consider Sinosauropteryx to be a bird.</li>
                    <li>There is only one named species of Sinosauropteryx, S. prima.</li>
                </ul>
            </div>
        </div>
    </div>
</div>