Grid Cards
ready
Collection of card items that can contain a brief description, an image, and a call to action.
<section class="nbhd-grid-cards cmp-grid-cards--01 nbhd-grid-cards--align-center nbhd-card-items-small nbhd-background-theme-primary-light nbhd-grid-cards--landscape" style="--nbhd-grid-cards-background: purple;">
<div class="">
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-cards__header ">
<div class="nbhd-eyebrow nbhd-grid-cards__eyebrow">
Justo Vestibulum Bibendum</div>
<h2 class="nbhd-title nbhd-grid-cards__title">Cursus Nibh Inceptos Vulputate</h2>
<h3 class="nbhd-subtitle nbhd-grid-cards__subtitle">Pharetra Nullam</h3>
<div class="nbhd-content nbhd-grid-cards__content">
Nulla vitae elit libero, a pharetra augue.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-grid-cards__cta cmp-grid-cards--main-cta" href="go-here" aria-label="learn more about Vestibulum Lorem.">Vestibulum Lorem</a>
</div>
</div>
</div>
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-list nbhd-grid-cards__grid nbhd-grid-cards--grid--align-center">
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-1-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this LINK">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=238&retina=true&h=160&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=238&retina=true&h=160&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=238&retina=true&h=160&crop=true&k=c" alt="Image Alternative Text" width="238" height="160" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Vulputate Sollicitudin</h4>
<div class="nbhd-content nbhd-card__content">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-1-link" target="_blank" aria-label="learn more about this LINK">Risus Ultricies Commodo</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-2-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&w=238&retina=true&h=160&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c" alt="Image Alternative Text" width="238" height="160" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Lorem Pharetra</h4>
<div class="nbhd-content nbhd-card__content">
Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-2-link" target="_blank" aria-label="learn more about this">Nullam</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-3-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&w=238&retina=true&h=160&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c" alt="Image Alternative Text" width="238" height="160" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Nullam Cursus</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-3-link" target="_blank" aria-label="learn more about this">Nibh</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-4-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=238&retina=true&h=160&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c" alt="Image Alternative Text" width="238" height="160" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Porta</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-4-link" target="_blank" aria-label="learn more about this">Lorem</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-4-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=238&retina=true&h=160&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c" alt="Image Alternative Text" width="238" height="160" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Sollicitudin</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-4-link" target="_blank" aria-label="learn more about this">Lorem</a>
</div>
</div>
</div>
</div>
</section>Variants
Grid Cards can be presented in various layouts. There are options for item size, media aspect ratio, background, alignment orientation among others.
Compact Media
With itemMediaCompact enabled. Shown with Medium item Size and Square media aspect ratio.
<section class="nbhd-grid-cards nbhd-grid-cards--compact cmp-grid-cards--01 nbhd-grid-cards--align-center nbhd-card-items-medium nbhd-background-theme-primary-light nbhd-grid-cards--square">
<div class="">
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-cards__header ">
<div class="nbhd-eyebrow nbhd-grid-cards__eyebrow">
Justo Vestibulum Bibendum</div>
<h2 class="nbhd-title nbhd-grid-cards__title">Cursus Nibh Inceptos Vulputate</h2>
<div class="nbhd-content nbhd-grid-cards__content">
Nulla vitae elit libero, a pharetra augue.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-grid-cards__cta cmp-artile-list--main-cta" href="go-here" aria-label="learn more about Vestibulum Lorem.">Vestibulum Lorem</a>
</div>
</div>
</div>
<div class="nbhd-container nbhd-grid-cards__container nbhd-background-theme-primary-light">
<div class="nbhd-grid-list nbhd-grid-cards__grid nbhd-grid-cards--grid--align-center">
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--visual-compact nbhd-background-theme-secondary-light" style="--nbhd-card-title-color: green;">
<div class="nbhd-card__visual">
<a href="card-1-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=238&retina=true&h=238&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=238&retina=true&h=238&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=238&retina=true&h=238&crop=true&k=c" alt="Image Alternative Text" width="238" height="238" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Vulputate Sollicitudin</h4>
<div class="nbhd-content nbhd-card__content">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-1-link" target="_blank" aria-label="learn more about this">Cursus</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--visual-compact nbhd-background-theme-secondary-light">
<div class="nbhd-card__visual">
<a href="card-2-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&w=238&retina=true&h=238&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=238&retina=true&h=238&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=238&retina=true&h=238&crop=true&k=c" alt="Image Alternative Text" width="238" height="238" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Lorem Pharetra</h4>
<div class="nbhd-content nbhd-card__content">
Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-2-link" target="_blank" aria-label="learn more about this">Nullam</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--visual-compact nbhd-card--media-background nbhd-background-theme-secondary-light">
<div class="nbhd-card__visual">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&w=238&retina=true&h=238&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=238&retina=true&h=238&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=238&retina=true&h=238&crop=true&k=c" alt="Image Alternative Text" width="238" height="238" loading="lazy" >
</picture>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Nullam Cursus</h4>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-3-link" target="_blank" aria-label="learn more about this">Nibh</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--visual-compact nbhd-background-theme-secondary-light">
<div class="nbhd-card__visual">
<a href="card-4-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=238&retina=true&h=238&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=238&retina=true&h=238&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=238&retina=true&h=238&crop=true&k=c" alt="Image Alternative Text" width="238" height="238" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Porta</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-4-link" target="_blank" aria-label="learn more about this">Lorem</a>
</div>
</div>
</div>
</div>
</section>Media as Background
<section class="nbhd-grid-cards cmp-grid-cards--01 nbhd-grid-cards--align-center nbhd-card-items-large nbhd-background-theme-secondary-light nbhd-grid-cards--landscape">
<div class="">
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-cards__header ">
<div class="nbhd-eyebrow nbhd-grid-cards__eyebrow">
Justo Vestibulum Bibendum</div>
<h2 class="nbhd-title nbhd-grid-cards__title">Cursus Nibh Inceptos Vulputate</h2>
<div class="nbhd-content nbhd-grid-cards__content">
Nulla vitae elit libero, a pharetra augue.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-grid-cards__cta cmp-artile-list--main-cta" href="go-here" aria-label="learn more about Vestibulum Lorem.">Vestibulum Lorem</a>
</div>
</div>
</div>
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-list nbhd-grid-cards__grid nbhd-grid-cards--grid--align-center">
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--media-background nbhd-background-theme-primary-light" style="--nbhd-card-title-color: green;">
<div class="nbhd-card__visual">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Vulputate Sollicitudin</h4>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-1-link" target="_blank" aria-label="learn more about this">Cursus</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--media-background nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&w=445&retina=true&h=545&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=545&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=545&crop=true&k=c" alt="Image Alternative Text" width="445" height="545" loading="lazy" >
</picture>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Lorem Pharetra</h4>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-2-link" target="_blank" aria-label="learn more about this">Nullam</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--media-background nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Nullam Cursus</h4>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-3-link" target="_blank" aria-label="learn more about this">Nibh</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--media-background nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Porta</h4>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-4-link" target="_blank" aria-label="learn more about this">Lorem</a>
</div>
</div>
</div>
</div>
</section>Item as CTA
<section class="nbhd-grid-cards cmp-grid-cards--01 nbhd-grid-cards--align-center nbhd-card-items-large nbhd-background-theme-primary-dark nbhd-grid-cards--undefined">
<div class="">
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-cards__header ">
<div class="nbhd-eyebrow nbhd-grid-cards__eyebrow">
Justo Vestibulum Bibendum</div>
<h2 class="nbhd-title nbhd-grid-cards__title">Cursus Nibh Inceptos Vulputate</h2>
<div class="nbhd-content nbhd-grid-cards__content">
Nulla vitae elit libero, a pharetra augue.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-grid-cards__cta cmp-artile-list--main-cta" href="go-here" aria-label="learn more about Vestibulum Lorem.">Vestibulum Lorem</a>
</div>
</div>
</div>
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-list nbhd-grid-cards__grid nbhd-grid-cards--grid--align-center">
<a class="nbhd-card nbhd-card--cta nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light" href="card-1-link" target="_blank" aria-label="learn more about this" style="--nbhd-card-title-color: green;">
<div class="nbhd-card__visual">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Vulputate Sollicitudin</h4>
<div class="nbhd-content nbhd-card__content">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div>
</div>
</a>
<a class="nbhd-card nbhd-card--cta nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light" href="card-2-link" target="_blank" aria-label="learn more about this">
<div class="nbhd-card__visual">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Lorem Pharetra</h4>
<div class="nbhd-content nbhd-card__content">
Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.</div>
</div>
</a>
<a class="nbhd-card nbhd-card--cta nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light" href="card-3-link" target="_blank" aria-label="learn more about this">
<div class="nbhd-card__visual">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Nullam Cursus</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
</div>
</a>
<a class="nbhd-card nbhd-card--cta nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light" href="card-4-link" target="_blank" aria-label="learn more about this">
<div class="nbhd-card__visual">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Porta</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
</div>
</a>
</div>
</div>
</section>With Shadow
<section class="nbhd-grid-cards cmp-grid-cards--01 nbhd-grid-cards--align-center nbhd-card-items-xlarge nbhd-background-theme-secondary-light nbhd-grid-cards--undefined">
<div class="">
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-cards__header ">
<div class="nbhd-eyebrow nbhd-grid-cards__eyebrow">
Justo Vestibulum Bibendum</div>
<h2 class="nbhd-title nbhd-grid-cards__title">Cursus Nibh Inceptos Vulputate</h2>
<div class="nbhd-content nbhd-grid-cards__content">
Nulla vitae elit libero, a pharetra augue.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-grid-cards__cta cmp-artile-list--main-cta" href="go-here" aria-label="learn more about Vestibulum Lorem.">Vestibulum Lorem</a>
</div>
</div>
</div>
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-list nbhd-grid-cards__grid nbhd-grid-cards--grid--align-center">
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--shadow nbhd-background-theme-primary-light" style="--nbhd-card-title-color: green;">
<div class="nbhd-card__visual">
<a href="card-1-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Vulputate Sollicitudin</h4>
<div class="nbhd-content nbhd-card__content">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-1-link" target="_blank" aria-label="learn more about this">Cursus</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--shadow nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-2-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Lorem Pharetra</h4>
<div class="nbhd-content nbhd-card__content">
Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-2-link" target="_blank" aria-label="learn more about this">Nullam</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--shadow nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-3-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Nullam Cursus</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-3-link" target="_blank" aria-label="learn more about this">Nibh</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--shadow nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-4-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Porta</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-4-link" target="_blank" aria-label="learn more about this">Lorem</a>
</div>
</div>
</div>
</div>
</section>With Zoom Turned Off
<section class="nbhd-grid-cards nbhd-grid-cards--no-zoom cmp-grid-cards--01 nbhd-grid-cards--align-center nbhd-card-items-medium nbhd-background-theme-secondary-dark nbhd-grid-cards--portrait">
<div class="">
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-cards__header ">
<div class="nbhd-eyebrow nbhd-grid-cards__eyebrow">
Justo Vestibulum Bibendum</div>
<h2 class="nbhd-title nbhd-grid-cards__title">Cursus Nibh Inceptos Vulputate</h2>
<div class="nbhd-content nbhd-grid-cards__content">
Nulla vitae elit libero, a pharetra augue.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-grid-cards__cta cmp-artile-list--main-cta" href="go-here" aria-label="learn more about Vestibulum Lorem.">Vestibulum Lorem</a>
</div>
</div>
</div>
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-list nbhd-grid-cards__grid nbhd-grid-cards--grid--align-center">
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--no-zoom nbhd-background-theme-secondary-dark" style="--nbhd-card-title-color: green;">
<div class="nbhd-card__visual">
<a href="card-1-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=160&retina=true&h=238&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=160&retina=true&h=238&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=160&retina=true&h=238&crop=true&k=c" alt="Image Alternative Text" width="160" height="238" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Vulputate Sollicitudin</h4>
<div class="nbhd-content nbhd-card__content">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-1-link" target="_blank" aria-label="learn more about this">Cursus</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--no-zoom nbhd-background-theme-secondary-dark">
<div class="nbhd-card__visual">
<a href="card-2-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&w=160&retina=true&h=238&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=160&retina=true&h=238&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=160&retina=true&h=238&crop=true&k=c" alt="Image Alternative Text" width="160" height="238" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Lorem Pharetra</h4>
<div class="nbhd-content nbhd-card__content">
Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-2-link" target="_blank" aria-label="learn more about this">Nullam</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--no-zoom nbhd-background-theme-secondary-dark">
<div class="nbhd-card__visual">
<a href="card-3-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&w=160&retina=true&h=238&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=160&retina=true&h=238&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=160&retina=true&h=238&crop=true&k=c" alt="Image Alternative Text" width="160" height="238" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Nullam Cursus</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-3-link" target="_blank" aria-label="learn more about this">Nibh</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--no-zoom nbhd-background-theme-secondary-dark">
<div class="nbhd-card__visual">
<a href="card-4-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=160&retina=true&h=238&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=160&retina=true&h=238&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=160&retina=true&h=238&crop=true&k=c" alt="Image Alternative Text" width="160" height="238" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Porta</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-4-link" target="_blank" aria-label="learn more about this">Lorem</a>
</div>
</div>
</div>
</div>
</section>Item Layout Reversed
<section class="nbhd-grid-cards cmp-grid-cards--01 nbhd-grid-cards--align-center nbhd-card-items-large nbhd-background-theme-primary-light nbhd-grid-cards--landscape">
<div class="">
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-cards__header ">
<div class="nbhd-eyebrow nbhd-grid-cards__eyebrow">
Justo Vestibulum Bibendum</div>
<h2 class="nbhd-title nbhd-grid-cards__title">Cursus Nibh Inceptos Vulputate</h2>
<div class="nbhd-content nbhd-grid-cards__content">
Nulla vitae elit libero, a pharetra augue.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-grid-cards__cta cmp-artile-list--main-cta" href="go-here" aria-label="learn more about Vestibulum Lorem.">Vestibulum Lorem</a>
</div>
</div>
</div>
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-list nbhd-grid-cards__grid nbhd-grid-cards--grid--align-center">
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--reversed nbhd-background-theme-secondary-light" style="--nbhd-card-title-color: green;">
<div class="nbhd-card__visual">
<a href="card-1-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Vulputate Sollicitudin</h4>
<div class="nbhd-content nbhd-card__content">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-1-link" target="_blank" aria-label="learn more about this">Cursus</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--reversed nbhd-background-theme-secondary-light">
<div class="nbhd-card__visual">
<a href="card-2-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Lorem Pharetra</h4>
<div class="nbhd-content nbhd-card__content">
Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-2-link" target="_blank" aria-label="learn more about this">Nullam</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--reversed nbhd-background-theme-secondary-light">
<div class="nbhd-card__visual">
<a href="card-3-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Nullam Cursus</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-3-link" target="_blank" aria-label="learn more about this">Nibh</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-card--reversed nbhd-background-theme-secondary-light">
<div class="nbhd-card__visual">
<a href="card-4-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=445&retina=true&h=300&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=300&crop=true&k=c" alt="Image Alternative Text" width="445" height="300" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Porta</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-4-link" target="_blank" aria-label="learn more about this">Lorem</a>
</div>
</div>
</div>
</div>
</section>No Header
<section class="nbhd-grid-cards nbhd-grid-cards--no-header cmp-grid-cards--01 nbhd-grid-cards--align-center nbhd-card-items-xlarge nbhd-background-theme-secondary-light nbhd-grid-cards--square">
<div class="">
<div class="nbhd-container nbhd-grid-cards__container ">
</div>
</div>
<div class="nbhd-container nbhd-grid-cards__container nbhd-component-padding-start-small">
<div class="nbhd-grid-list nbhd-grid-cards__grid nbhd-grid-cards--grid--align-center">
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light" style="--nbhd-card-title-color: green;">
<div class="nbhd-card__visual">
<a href="card-1-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=445&retina=true&h=445&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=445&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=445&retina=true&h=445&crop=true&k=c" alt="Image Alternative Text" width="445" height="445" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Vulputate Sollicitudin</h4>
<div class="nbhd-content nbhd-card__content">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-1-link" target="_blank" aria-label="learn more about this">Cursus</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-2-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&w=445&retina=true&h=445&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=445&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=445&retina=true&h=445&crop=true&k=c" alt="Image Alternative Text" width="445" height="445" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Lorem Pharetra</h4>
<div class="nbhd-content nbhd-card__content">
Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-2-link" target="_blank" aria-label="learn more about this">Nullam</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-3-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&w=445&retina=true&h=445&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=445&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=445&retina=true&h=445&crop=true&k=c" alt="Image Alternative Text" width="445" height="445" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Nullam Cursus</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-3-link" target="_blank" aria-label="learn more about this">Nibh</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-center nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-4-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=445&retina=true&h=445&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=445&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=445&retina=true&h=445&crop=true&k=c" alt="Image Alternative Text" width="445" height="445" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Porta</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-4-link" target="_blank" aria-label="learn more about this">Lorem</a>
</div>
</div>
</div>
</div>
</section>Alignment
<section class="nbhd-grid-cards cmp-grid-cards--01 nbhd-grid-cards--align-start nbhd-card-items-small nbhd-background-theme-primary-dark nbhd-grid-cards--undefined">
<div class="">
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-cards__header ">
<div class="nbhd-eyebrow nbhd-grid-cards__eyebrow">
Justo Vestibulum Bibendum</div>
<h2 class="nbhd-title nbhd-grid-cards__title">Cursus Nibh Inceptos Vulputate</h2>
<div class="nbhd-content nbhd-grid-cards__content">
Nulla vitae elit libero, a pharetra augue.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-grid-cards__cta cmp-artile-list--main-cta" href="go-here" aria-label="learn more about Vestibulum Lorem.">Vestibulum Lorem</a>
</div>
</div>
</div>
<div class="nbhd-container nbhd-grid-cards__container ">
<div class="nbhd-grid-list nbhd-grid-cards__grid nbhd-grid-cards--grid--align-start">
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-start nbhd-background-theme-primary-light" style="--nbhd-card-title-color: green;">
<div class="nbhd-card__visual">
<a href="card-1-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/qvmrvyj220/webp/smartsprinkler-controller-app-campaignslider.webp?=90&w=238&retina=true&h=160&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=238&retina=true&h=160&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=238&retina=true&h=160&crop=true&k=c" alt="Image Alternative Text" width="238" height="160" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Vulputate Sollicitudin</h4>
<div class="nbhd-content nbhd-card__content">
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-1-link" target="_blank" aria-label="learn more about this">Cursus</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-start nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-2-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/iiiy8rewfd/webp/GXP50C-Disposal.webp?=90&w=238&retina=true&h=160&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/iiiy8rewfd/jpeg/GXP50C-Disposal.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c" alt="Image Alternative Text" width="238" height="160" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Lorem Pharetra</h4>
<div class="nbhd-content nbhd-card__content">
Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-2-link" target="_blank" aria-label="learn more about this">Nullam</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-start nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-3-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&w=238&retina=true&h=160&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c" alt="Image Alternative Text" width="238" height="160" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Nullam Cursus</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-3-link" target="_blank" aria-label="learn more about this">Nibh</a>
</div>
</div>
<div class="nbhd-card nbhd-grid-cards__item nbhd-card--align-start nbhd-background-theme-primary-light">
<div class="nbhd-card__visual">
<a href="card-4-link" class="nbhd-card__visual-link" target="_blank" aria-label="learn more about this">
<picture class="nbhd-picture nbhd-fluid ">
<source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&w=238&retina=true&h=160&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image undefined" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&w=238&retina=true&h=160&crop=true&k=c" alt="Image Alternative Text" width="238" height="160" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Porta</h4>
<div class="nbhd-content nbhd-card__content">
Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="card-4-link" target="_blank" aria-label="learn more about this">Lorem</a>
</div>
</div>
</div>
</div>
</section>Image Dimensions
If not providing a resized image be sure to enable cropping feature for the component properties.
| Description | Dimension |
|---|---|
| Small and Medium Card Item Landscape | 238px x 160px |
| Small and Medium Card Item Portrait | 160px x 238px |
| Small and Medium Card Item Square | 238px x 238px |
| Large and XLarge Card Item Landscape | 445px x 300px |
| Large and XLarge Card Item Portrait | 300px x 445px |
| Large and XLarge Card Item Square | 445px x 445px |
Component Properties
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow |
string
|
Short introductory content above the title. | |
| title |
string
|
Main content for headline title of component. | |
| subtitle |
string
|
Content for secondary title that is under title. | |
| content |
string
|
General content block below titles and above call to action. | |
| ctaLink |
object
|
Call to action link used on component to link to another page or section. | |
| cssClass |
string
|
Additional CSS class(es) to add to component. | |
| componentID |
string
|
ID attribute value for component. | |
| componentCompact |
boolean
|
false
|
Enable compact styling. |
| componentMarginTop |
none | small | medium | large
|
none
|
Add additional margins above the component. Small = 24px, Medium = 48px, Large = 96px. |
| componentMarginBottom |
none | small | medium | large
|
none
|
Add additional margins below the component. Small = 24px, Medium = 48px, Large = 96px. |
| componentPaddingTop |
default | none | small | medium | large
|
default
|
Set the padding for the top of the component. None = 0px, Small = 24px, Medium = 48px, Large = 96px. Default will not override the top padding styling for the component and use the default setting. |
| componentPaddingBottom |
default | none | small | medium | large
|
default
|
Set the padding for the bottom of the component. None = 0px, Small = 24px, Medium = 48px, Large = 96px. Default will not override the bottom padding styling for the component and use the default setting. |
| componentBackground |
primary-light | primary-dark | secondary-light | secondary-dark
|
primary-light
|
Background theme color for component. |
| componentAlignment |
left | center | right
|
center
|
Content alignment for main component content. |
| itemGridAlignment |
left | center | right
|
center
|
Card item layout is reversed. |
| itemSize |
small | medium | large | xlarge
|
small
|
Set the item size and max row limit on desktop for all items. Small = 5, Medium = 4, Large = 3, XLarge = 2 |
| itemLayoutReversed |
boolean
|
false
|
Card item layout is reversed. |
| itemMediaCompact |
boolean
|
false
|
Enable additional padding around media. |
| itemShowShadow |
boolean
|
false
|
Add shadow to card item. |
| itemAlignment |
left | center | right
|
center
|
Content alignment for card item. |
| itemBackground |
primary-light | primary-dark | secondary-light | secondary-dark
|
primary-light
|
Background theme color for item. |
| itemZoomTurnedOff |
boolean
|
false
|
Turn off the hover zoom for card item. |
| itemAsCTA |
boolean
|
false
|
Enable the entire card item as a call to action. |
| componentRenovation |
string
|
The ability to alter and renovate the provided component CSS properties of the component. |
Card Properties
| Name | Type | Default | Description |
|---|---|---|---|
| title |
string
|
Main content for headline title of component. | |
| content |
string
|
General content block below titles and above call to action. | |
| ctaLink |
string
|
Call to action link used on component to link to another page or section. | |
| ctaButton |
string
|
Call to action button used on component to link to another page or section. (Optional) | |
| mediaSource |
object
|
Video or Image from Widen. | |
| mediaAltText |
string
|
Alternative Text for media. | |
| mediaCSSClass |
string
|
Additional CSS class(es) to add to media element. | |
| imageHeight |
string
|
Card image height. | |
| imageWidth |
string
|
Card image width. | |
| cropImage |
boolean
|
false
|
Enables the cropping of Widen asset maintaining the aspect ratio of the defined width and height. Works with cropImagePosition.
|
| cropImagePosition |
center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
center
|
Define the portion of the Widen asset that should be the kept and not cropped out. |
| itemMediaAsBackground |
boolean
|
false
|
The ability to have the media image be the entire background of the card item. |
| componentRenovation |
string
|
The ability to alter and renovate the provided CSS properties of the item. |
CSS Properties
The following CSS Properties are available to update styling when provided with componentRenovation.
It is ideal to use the default component styling and only leverage the componentRenovation feature in extreme cases.
Refer to the Component Renovation guidelines on how to use.
Remember...with great power, comes great responsibility!
| Property | Description |
|---|---|
--nbhd-grid-cards-background
|
Controls the background styling. |
--nbhd-grid-cards--header--margin-block
|
Controls the block margin for the header within the component. |
--nbhd-grid-cards--header--padding-block
|
Controls the block padding for the header within the component. |
--nbhd-grid-cards--header--padding-inline
|
Controls the inline padding for the header within the component. |
--nbhd-grid-cards--header--text-align
|
Controls the text alignment styling for the header within the component. |
--nbhd-grid-cards--header--breakpoint-md--margin-block
|
Controls the block margin for the header within the component for breakpoint medium (768px - 1023px).
|
--nbhd-grid-cards--header--breakpoint-md--padding-block
|
Controls the block padding for the header within the component for breakpoint medium (768px - 1023px).
|
--nbhd-grid-cards--header--breakpoint-lg--margin-block
|
Controls the block margin for the header within the component for breakpoint large (1024px - 1199px).
|
--nbhd-grid-cards--header--breakpoint-lg--padding-block
|
Controls the block padding for the header within the component for breakpoint large (1024px - 1199px).
|
--nbhd-grid-cards--header--breakpoint-lg--padding-inline
|
Controls the inline padding for the header within the component for breakpoint large (1024px - 1199px).
|