No notes defined.

<div class="linkGroups">
    <div class="linkGroups__group">
        <div class="linkGroups__heading">Maine</div>
        <ul class="linkGroups__list">
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Seacoast</a></li>
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Parks</a></li>
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Activities</a></li>
        </ul>
    </div>
    <div class="linkGroups__group">
        <div class="linkGroups__heading">Massachusetts</div>
        <ul class="linkGroups__list">
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Boston</a></li>
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Cambridge</a></li>
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Lowell</a></li>
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Salem</a></li>
        </ul>
    </div>
    <div class="linkGroups__group">
        <div class="linkGroups__heading">New Hampshire</div>
        <ul class="linkGroups__list">
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Towns</a></li>
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Parks</a></li>
            <li class="linkGroups__item"><a class="linkGroups__link" href="#">Activities</a></li>
        </ul>
    </div>
</div>
  • Content:
    @use "/resources/styles/common" as *;
    @use "/resources/styles/config";
    
    .linkGroups {
        $b: &;
    
        display: grid;
        gap: config.$padding;
        //grid-auto-columns: 1fr;
        grid-auto-flow: column;
        width: max-content;
        grid-template-columns: auto;
    
        .linkGroups__callout {
            img {
                height: 100%;
            }
        }
    
        .linkGroups__group {
            padding: config.$padding;
    
            #{$b}__heading {
                font-weight: bold;
                padding: config.$thin-v-space 0;
            }
    
            #{$b}__list {
                list-style: none;
                padding-left: 0;
                margin-bottom: 0;
    
                &.-wide {
                    columns: 2;
                    column-gap: config.$h-space;
    
                    .linkGroup__link {
                        break-inside: avoid;
                    }
                }
    
                &.-secondary {
                    margin-bottom: 2rem;
                }
            }
    
            #{$b}__item {
                margin-bottom: 0;
            }
    
            #{$b}__link {
                display: block;
                padding: config.$thin-v-space 0;
            }
        }
    }
    
  • URL: /components/raw/link-groups/_index.scss
  • Filesystem Path: resources/styles/molecules/link-groups/_index.scss
  • Size: 1.1 KB