Pattern Library

Link Groups

No notes defined.

<div class="linkGroups">
    <div class="linkGroups__group linkGroup">
        <div class="linkGroup__heading">Maine</div>
        <ul class="linkGroup__list">
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Seacoast</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Parks</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Activities</a></li>
        </ul>
    </div>
    <div class="linkGroups__group linkGroup">
        <div class="linkGroup__heading">Massachusetts</div>
        <ul class="linkGroup__list -wide">
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Boston</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Cambridge</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Lowell</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Salem</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Worcester</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Martha's Vineyard</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Nantucket</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Provincetown</a></li>
        </ul>
    </div>
    <div class="linkGroups__group linkGroup">
        <div class="linkGroup__heading">New Hampshire</div>
        <ul class="linkGroup__list">
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Towns</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Parks</a></li>
            <li class="linkGroup__item"><a class="linkGroup__link" href="#">Activities</a></li>
        </ul>
    </div>
</div>
  • Content: 
    .linkGroups {
    display: flex;

    .linkGroups__group {
        width: max-content;

        + .linkGroups__group {
            margin-left: 3rem;
        }
    }
}
  • URL: /components/raw/link-groups/link-groups.scss
  • Filesystem Path: resources/styles/molecules/link-groups/link-groups.scss
  • Size: 168 Bytes