Swegon Component Library

Bento Grid: 3 Primary Without Bg Image 2 Secondary 

<section class="bento-grid theme--swegon-green">
    <div class="bento-grid__primary bento-grid__primary--three">
        <a class="bento-grid__primary-card bento-grid__primary-card--no-image" href="#">

            <div class="bento-grid__primary-card-content">
                <div class="bento-grid__primary-card-icon">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-air-distribution"></use>
                    </svg>
                </div>

                <div class="bento-grid__primary-card-copy">
                    <div class="bento-grid__primary-card-heading-row">
                        <h3 class="bento-grid__primary-card-title">Demand Controlled Ventilation</h3>
                        <span class="bento-grid__primary-card-heading-icon">
                            <svg class="icon " focusable="false">
                                <use xlink:href="#icon-arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                    <p class="bento-grid__primary-card-subtitle">Maintain comfort with lower energy use through need-based airflow control.</p>
                </div>
            </div>
        </a>
        <a class="bento-grid__primary-card bento-grid__primary-card--no-image" href="#" target="_blank" rel="noopener">

            <div class="bento-grid__primary-card-content">
                <div class="bento-grid__primary-card-icon">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-cooling-heating"></use>
                    </svg>
                </div>

                <div class="bento-grid__primary-card-copy">
                    <div class="bento-grid__primary-card-heading-row">
                        <h3 class="bento-grid__primary-card-title">Hydronic Optimisation</h3>
                        <span class="bento-grid__primary-card-heading-icon">
                            <svg class="icon " focusable="false">
                                <use xlink:href="#icon-arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                    <p class="bento-grid__primary-card-subtitle">Optimise pumps and control loops to reduce system losses and operating costs.</p>
                </div>
            </div>
        </a>
        <a class="bento-grid__primary-card bento-grid__primary-card--no-image" href="#">

            <div class="bento-grid__primary-card-content">
                <div class="bento-grid__primary-card-icon">
                    <svg class="icon " focusable="false">
                        <use xlink:href="#icon-factory"></use>
                    </svg>
                </div>

                <div class="bento-grid__primary-card-copy">
                    <div class="bento-grid__primary-card-heading-row">
                        <h3 class="bento-grid__primary-card-title">Industrial Performance</h3>
                        <span class="bento-grid__primary-card-heading-icon">
                            <svg class="icon " focusable="false">
                                <use xlink:href="#icon-arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                    <p class="bento-grid__primary-card-subtitle">Scalable control strategy for mixed-use and production facilities.</p>
                </div>
            </div>
        </a>
    </div>

    <div class="bento-grid__secondary bento-grid__secondary--white bento-grid__secondary--two">
        <a class="bento-grid__secondary-card" href="#">
            <div class="bento-grid__secondary-card-copy">
                <h4 class="bento-grid__secondary-card-title">Reference Cases</h4>
                <p class="bento-grid__secondary-card-subtitle">Read customer cases and implementation outcomes in detail.</p>
            </div>

            <span class="bento-grid__secondary-card-link-icon">
                <svg class="icon " focusable="false">
                    <use xlink:href="#icon-arrow-right"></use>
                </svg>
            </span>
        </a>
        <a class="bento-grid__secondary-card" href="#">
            <div class="bento-grid__secondary-card-copy">
                <h4 class="bento-grid__secondary-card-title">Technical Support</h4>
                <p class="bento-grid__secondary-card-subtitle">Get guidance for planning, deployment and optimisation setup.</p>
            </div>

            <span class="bento-grid__secondary-card-link-icon">
                <svg class="icon " focusable="false">
                    <use xlink:href="#icon-arrow-right"></use>
                </svg>
            </span>
        </a>
    </div>
</section>
 
<section class="bento-grid{{#if theme}} theme--{{theme}}{{/if}}{{#if darkTheme}} theme--dark{{/if}}">
    <div
        class="bento-grid__primary{{#if primaryCards.[3]}} bento-grid__primary--four{{else}}{{#if primaryCards.[2]}} bento-grid__primary--three{{else}}{{#if primaryCards.[1]}} bento-grid__primary--two{{else}} bento-grid__primary--single{{/if}}{{/if}}{{/if}}">
        {{#each primaryCards}}
        <a class="bento-grid__primary-card{{#if ../hasPrimaryImages}} bento-grid__primary-card--with-image{{else}} bento-grid__primary-card--no-image{{/if}}"
            href="{{this.link.href}}" {{#ifequals this.link.type "external" }}target="_blank" rel="noopener"
            {{/ifequals}}>

            {{#if ../hasPrimaryImages}}
            <img class="bento-grid__primary-card-image" src="{{this.image.src}}" alt="{{this.image.alt}}" />
            {{/if}}

            <div class="bento-grid__primary-card-content">
                <div class="bento-grid__primary-card-icon">
                    {{> @icon id=this.icon}}
                </div>

                <div class="bento-grid__primary-card-copy">
                    <div class="bento-grid__primary-card-heading-row">
                        <h3 class="bento-grid__primary-card-title">{{this.title}}</h3>
                        <span class="bento-grid__primary-card-heading-icon">
                            {{> @icon id="arrow-right"}}
                        </span>
                    </div>
                    <p class="bento-grid__primary-card-subtitle">{{this.subtitle}}</p>
                </div>
            </div>
        </a>
        {{/each}}
    </div>

    {{#if secondaryCards.[0]}}
    <div
        class="bento-grid__secondary bento-grid__secondary--{{secondaryTheme}}{{#if secondaryCards.[2]}} bento-grid__secondary--three{{else}}{{#if secondaryCards.[1]}} bento-grid__secondary--two{{else}} bento-grid__secondary--single{{/if}}{{/if}}">
        {{#each secondaryCards}}
        <a class="bento-grid__secondary-card" href="{{this.link.href}}" {{#ifequals this.link.type "external"
            }}target="_blank" rel="noopener" {{/ifequals}}>
            <div class="bento-grid__secondary-card-copy">
                <h4 class="bento-grid__secondary-card-title">{{this.title}}</h4>
                <p class="bento-grid__secondary-card-subtitle">{{this.subtitle}}</p>
            </div>

            <span class="bento-grid__secondary-card-link-icon">
                {{#ifequals this.link.type "external"}}
                {{> @icon id="external-link"}}
                {{else}}
                {{> @icon id="arrow-right"}}
                {{/ifequals}}
            </span>
        </a>
        {{/each}}
    </div>
    {{/if}}
</section>
 
{
  "theme": "swegon-green",
  "hasPrimaryImages": false,
  "primaryCards": [
    {
      "icon": "air-distribution",
      "title": "Demand Controlled Ventilation",
      "subtitle": "Maintain comfort with lower energy use through need-based airflow control.",
      "image": null,
      "link": {
        "href": "#",
        "type": "internal"
      }
    },
    {
      "icon": "cooling-heating",
      "title": "Hydronic Optimisation",
      "subtitle": "Optimise pumps and control loops to reduce system losses and operating costs.",
      "image": null,
      "link": {
        "href": "#",
        "type": "external"
      }
    },
    {
      "icon": "factory",
      "title": "Industrial Performance",
      "subtitle": "Scalable control strategy for mixed-use and production facilities.",
      "image": null,
      "link": {
        "href": "#",
        "type": "internal"
      }
    }
  ],
  "secondaryTheme": "white",
  "secondaryCards": [
    {
      "title": "Reference Cases",
      "subtitle": "Read customer cases and implementation outcomes in detail.",
      "link": {
        "href": "#",
        "type": "internal"
      }
    },
    {
      "title": "Technical Support",
      "subtitle": "Get guidance for planning, deployment and optimisation setup.",
      "link": {
        "href": "#",
        "type": "internal"
      }
    }
  ]
}
  • Content: 
    .bento-grid {
    margin-bottom: size(4);
}

.bento-grid__primary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

    &--single {
        @include breakpoint($m) {
            grid-template-columns: 1fr;
        }

        @include breakpoint($l) {
            grid-template-columns: 1fr;
        }
    }

    &--two {
        @include breakpoint($m) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @include breakpoint($l) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    &--three {
        @include breakpoint($m) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @include breakpoint($l) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    &--four {
        @include breakpoint($m) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        @include breakpoint($l) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
}

.bento-grid__primary-card {
    position: relative;
    display: flex;
    min-height: size(22);
    overflow: hidden;
    text-decoration: none;
    color: $color-black;
    background-color: $color-gray-1;
    transition: background-color .2s ease, min-height .2s ease;

    .theme--white & {
        background-color: $color-white;
    }

    &:hover {
        text-decoration: none;
    }

    &--with-image {
        color: $color-white;

        .bento-grid__primary-card-content {
            background: transparent;
        }

        .bento-grid__primary-card-image {
            opacity: 0;
        }

        &:hover {
            min-height: 334px;
            color: $color-white;

            .bento-grid__primary-card-content {
                background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.594), rgba(0, 0, 0, 0));
                background-repeat: no-repeat;
                background-size: 100% 214px;
                background-position: bottom;
                padding: 24px;
            }

            .bento-grid__primary-card-copy {
                margin-top: auto;
            }

            .bento-grid__primary-card-image {
                opacity: 1;
                transform: scale(1.06);
            }

            .bento-grid__primary-card-icon,
            .bento-grid__primary-card-heading-icon {
                fill: $color-white;
            }

            .bento-grid__primary-card-title {
                color: $color-white;
            }

            .bento-grid__primary-card-subtitle {
                color: $color-white;
            }
        }
    }

    &--no-image {
        &:hover {
            background-color: $color-green-pale;
        }

        @include color-theme {
            &:hover {
                background-color: rgba($arg-theme-color, .18);
            }
        }
    }
}

.bento-grid__primary-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .25s ease, transform .25s ease;
}

.bento-grid__primary-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 74px;
    align-items: flex-start;
    padding: size(2);


    @include breakpoint($m) {
        padding: 21px;
    }
}

.bento-grid__primary-card-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    fill: $color-green-dark;

    .icon {
        width: 40px;
        height: 40px;
    }
}

.bento-grid__secondary-card-link-icon {
    width: size(4);
    min-width: size(4);
    height: size(4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    fill: $color-green;

    .icon {
        width: 24px;
        height: 24px;
    }

    @include color-theme {
        fill: $arg-theme-color;
    }
}

.bento-grid__primary-card-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.bento-grid__primary-card-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.bento-grid__primary-card-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    fill: $color-green-dark;

    .icon {
        width: 24px;
        height: 24px;
    }
}

.bento-grid__primary-card-title,
.bento-grid__secondary-card-title {
    margin: 0 0 size(1);
    font-weight: 700;
    line-height: 1.4;
}

.bento-grid__primary-card-title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    color: $color-green-dark;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    flex: 1;
}

.bento-grid__secondary-card-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.bento-grid__primary-card-subtitle,
.bento-grid__secondary-card-subtitle {
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.bento-grid__primary-card-subtitle {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.4;
    color: $color-gray-4;
}

.bento-grid__secondary {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;

    &--single {
        @include breakpoint($m) {
            grid-template-columns: 1fr;
        }

        @include breakpoint($l) {
            grid-template-columns: 1fr;
        }
    }

    &--two {
        @include breakpoint($m) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @include breakpoint($l) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    &--three {
        @include breakpoint($m) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @include breakpoint($l) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    &--white .bento-grid__secondary-card {
        background-color: $color-white;
    }

    &--grey .bento-grid__secondary-card {
        background-color: $color-gray-1;
    }
}

.bento-grid__secondary-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: size(2);
    align-items: start;
    border: 1px solid $color-gray-1;
    text-decoration: none;
    color: $color-black;
    background-color: $color-white;
    padding: size(2);

    @include breakpoint($m) {
        padding: size(3);
    }

    &:hover {
        text-decoration: none;
        background-color: $color-green-pale;
    }

    @include color-theme {
        &:hover {
            background-color: rgba($arg-theme-color, .18);
        }
    }
}

.bento-grid__secondary-card-subtitle {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.45;
}

.theme--air-academy-dusk {
    .bento-grid__primary-card-title {
        color: #123A65;
    }

    .bento-grid__secondary-card-title {
        color: #123A65;
    }

    .bento-grid__primary-card-icon {
        fill: #123A65;
    }

    .bento-grid__primary-card-heading-icon {
        fill: $color-black;
    }

    .bento-grid__primary-card--no-image {
        &:hover {
            background-color: #E6EDF0;
        }
    }

    .bento-grid__secondary-card {
        &:hover {
            background-color: #E6EDF0;
        }
    }
}
  • URL: /components/raw/bento-grid/bento-grid.scss
  • Filesystem Path: src/components/bento-grid/bento-grid.scss
  • Size: 7.5 KB
  • Content: 
    // Bento Grid is render-only and currently has no client-side JavaScript behavior.
  • URL: /components/raw/bento-grid/index.js
  • Filesystem Path: src/components/bento-grid/index.js
  • Size: 83 Bytes

No notes defined.