<div class="tabs">
    <ul class="tabs__labels" role="tablist">
        <li
            class="tabs__label tabs__label--active"
            title="Firestar Item"
            role="presentation"
        >
            <a
                class="tabs__link"
                id="link-firestar"
                href="javascript:void(0);"
                role="tab"
                tabindex="0"
                aria-selected="true"
                aria-controls="content-firestar"
            >Firestar</a>
        </li>
        <li
            class="tabs__label"
            title="Wolverine Item"
            role="presentation"
        >
            <a
                class="tabs__link"
                id="link-wolverine"
                href="javascript:void(0);"
                role="tab"
                tabindex="0"
                aria-selected="true"
                aria-controls="content-wolverine"
            >Wolverine</a>
        </li>
        <li
            class="tabs__label"
            title="Storm Item"
            role="presentation"
        >
            <a
                class="tabs__link"
                id="link-storm"
                href="javascript:void(0);"
                role="tab"
                tabindex="0"
                aria-selected="true"
                aria-controls="content-storm"
            >Storm</a>
        </li>
        <li
            class="tabs__label"
            title="Spiderman Item"
            role="presentation"
        >
            <a
                class="tabs__link"
                id="link-spiderman"
                href="javascript:void(0);"
                role="tab"
                tabindex="0"
                aria-selected="true"
                aria-controls="content-spiderman"
            >Spiderman</a>
        </li>
        <li
            class="tabs__label"
            title="Ms Marvel Item"
            role="presentation"
        >
            <a
                class="tabs__link"
                id="link-ms-marvel"
                href="javascript:void(0);"
                role="tab"
                tabindex="0"
                aria-selected="true"
                aria-controls="content-ms-marvel"
            >Ms Marvel</a>
        </li>
    </ul>
    <div
        class="tabs__content tabs__content--active"
        id="content-firestar"
        role="tabpanel"
        aria-labelledby="link-firestar"
    >
        <img
            alt="Firestar (Marvel Comics)"
            src="http://upload.wikimedia.org/wikipedia/en/6/60/Firestar_%28Marvel_Comics%29.png"
            width="250"
            height="390"
        />
        <p>Okay, girl, don't let them see you sweat.</p>
    </div>
    <div
        class="tabs__content"
        id="content-wolverine"
        role="tabpanel"
        aria-labelledby="link-wolverine"
    >Stuff about Wolverine!</div>
    <div
        class="tabs__content"
        id="content-storm"
        role="tabpanel"
        aria-labelledby="link-storm"
    >Stuff about Storm!</div>
    <div
        class="tabs__content"
        id="content-spiderman"
        role="tabpanel"
        aria-labelledby="link-spiderman"
    >Stuff about Spiderman!</div>
    <div
        class="tabs__content"
        id="content-ms-marvel"
        role="tabpanel"
        aria-labelledby="link-ms-marvel"
    >Stuff about Ms Marvel!</div>
</div>