Card
draft
in progress...
<div class="nbhd-card nbhd-card--align-start nbhd-background-theme-primary-light" id="crd-item--01">
<div class="nbhd-card__visual">
<a href="item-link" class="nbhd-card__visual-link" aria-label="Learn more about Mollis">
<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=584&retina=true&crop=true&k=c">
<source type="image/jpeg" srcset="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=584&retina=true&crop=true&k=c">
<img class="nbhd-image nbhd-fluid nbhd-card__image cd-media-cls" src="https://moen.widen.net/content/qvmrvyj220/jpeg/smartsprinkler-controller-app-campaignslider.jpg?=90&w=584&retina=true&crop=true&k=c" alt="Alternative text for media" width="584" height="auto" loading="lazy" >
</picture>
</a>
</div>
<div class="nbhd-card__detail">
<h4 class="nbhd-card__title">
Pellentesque Euismod</h4>
<div class="nbhd-content nbhd-card__content">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
<a class="nbhd-link nbhd-button nbhd-button-underlined nbhd-card__cta" href="item-link" aria-label="Learn more about Mollis">Mollis</a>
</div>
</div>Element Properties
| Name | Type | Default | Description |
|---|---|---|---|
| title |
string
|
||
| content |
string
|
||
| ctaLink |
string
|
||
| ctaButton |
string
|
||
| mediaSource |
object
|
Video or Image from Widen. | |
| mediaAltText |
string
|
Alternative Text for media. | |
| mediaImageHeight |
string
|
||
| mediaImageWidth |
string
|
||
| cropImage |
boolean
|
false
|
|
| cropImagePosition |
center | top | top-right | right | bottom-right | bottom | bottom-left | left | top-left
|
center
|
|
| mediaCSSClass |
string
|
Additional CSS class(es) to add to media element. | |
| itemZoomTurnedOff |
boolean
|
false
|
|
| itemLayoutReversed |
boolean
|
false
|
|
| itemMediaCompact |
boolean
|
false
|
|
| itemMediaAsBackground |
boolean
|
false
|
|
| itemShowShadow |
boolean
|
false
|
|
| itemAlignment |
left | center | right
|
left
|
|
| itemBackground |
primary-light | primary-dark | secondary-light | secondary-dark
|
primary-light
|
Background theme color for item. |
| itemAsCTA |
boolean
|
false
|
|
| componentRenovation |
string
|