This is documentation for Neighborhood v1 and may be outdated. Please visit the latest Neighborhood Design System documentation for latest features.

Accordion
draft

Accordion is a component that focuses on imagery and expands on larger screens to reveal additional content.

Open in new window
Viewport: 
<section class="nbhd-accordion nbhd-accordion--toggle-vertical-bottom nbhd-accordion--toggle-left nbhd-accordion--horizontal-left nbhd-accordion--text-left nbhd-accordion--vertical-bottom  nbhd-background-theme-secondary-light " id="cmp-accordion-gallery-01"4>
  <div class="nbhd-container nbhd-accordion__container">
  <div class="nbhd-accordion__items">
  <div class="nbhd-accordion-item nbhd-theme-overlay nbhd-accordion-item--overlay-75 ">
  <button class="nbhd-accordion-item__toggle nbhd-accordion-toggle" type="button" aria-expanded="false" aria-controls="nbhd-accordion-item-1">
    <span class="nbhd-accordion-toggle__content">
    <span class="nbhd-accordion-toggle__title">
      Etiam Euismod Fermentum</span>
      <span class="nbhd-ui-control nbhd-accordion-toggle__expand">
        <span class="nbhd-ui-control__icon">
          <svg class="nbhd-svg-icon nbhd-ui-control__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
            <title>Expand</title>
            <g><path d="M11.768777,10.0002085 L19.6335286,2.13512894 C20.1221571,1.64689695 20.1221571,0.854718672 19.6335286,0.366486689 C19.1449,-0.12216223 18.3535886,-0.12216223 17.8649601,0.366486689 L10.0002085,8.23156622 L2.13503992,0.366486689 C1.64641137,-0.12216223 0.855099956,-0.12216223 0.36647141,0.366486689 C-0.122157137,0.854718672 -0.122157137,1.64689695 0.36647141,2.13512894 L8.23163995,10.0002085 L0.36647141,17.865288 C-0.122157137,18.35352 -0.122157137,19.1456983 0.36647141,19.6339302 C0.610785683,19.8778378 0.930979133,20 1.25075566,20 C1.5705322,20 1.89072565,19.8778378 2.13503992,19.6335133 L10.0002085,11.7684338 L17.8649601,19.6335133 C18.1092744,19.8778378 18.4294678,20 18.7492443,20 C19.0690209,20 19.3892143,19.8778378 19.6335286,19.6335133 C20.1221571,19.1452813 20.1221571,18.353103 19.6335286,17.8648711 L11.768777,10.0002085 Z"></path></g>
          </svg>
        </span>
      </span>
    </span>
    <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&amp;w=750&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
      <source type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=750&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
      <img class="nbhd-image nbhd-fluid nbhd-accordion-toggle__image" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=750&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c" alt="" width="750" height="750" loading="lazy" >
    </picture>
  </button>
  <div class="nbhd-accordion-panel nbhd-accordion-item__panel" id="nbhd-accordion-item-1" role="region" aria-label="Etiam Euismod Fermentum">
    <button class="nbhd-accordion-close nbhd-ui-control nbhd-accordion-panel__close" type="button">
      <span class="nbhd-ui-control__icon">
        <svg class="nbhd-svg-icon nbhd-ui-control__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
          <title>close</title>
          <g><path d="M11.768777,10.0002085 L19.6335286,2.13512894 C20.1221571,1.64689695 20.1221571,0.854718672 19.6335286,0.366486689 C19.1449,-0.12216223 18.3535886,-0.12216223 17.8649601,0.366486689 L10.0002085,8.23156622 L2.13503992,0.366486689 C1.64641137,-0.12216223 0.855099956,-0.12216223 0.36647141,0.366486689 C-0.122157137,0.854718672 -0.122157137,1.64689695 0.36647141,2.13512894 L8.23163995,10.0002085 L0.36647141,17.865288 C-0.122157137,18.35352 -0.122157137,19.1456983 0.36647141,19.6339302 C0.610785683,19.8778378 0.930979133,20 1.25075566,20 C1.5705322,20 1.89072565,19.8778378 2.13503992,19.6335133 L10.0002085,11.7684338 L17.8649601,19.6335133 C18.1092744,19.8778378 18.4294678,20 18.7492443,20 C19.0690209,20 19.3892143,19.8778378 19.6335286,19.6335133 C20.1221571,19.1452813 20.1221571,18.353103 19.6335286,17.8648711 L11.768777,10.0002085 Z"></path></g>
        </svg>
      </span>
      <span class="nbhd-ui-control__label nbhd-accordion-close__label">
      Close</span>
    </button>
    <div class="nbhd-accordion-panel__detail nbhd-overlay">
      <div class="nbhd-accordion-detail">
        <h2 class="nbhd-title nbhd-accordion-panel__title">Etiam Euismod Fermentum</h2>
        <div class="nbhd-content nbhd-accordion-panel__content">
          Etiam porta sem malesuada magna mollis euismod.</div>
          <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-accordion-panel__cta" href="item-1-link" aria-label="learn more about this">Nullam</a>
        </div>
      </div>
      <div class="nbhd-accordion-panel__visual">
        <picture class="nbhd-picture nbhd-fluid ">
          <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&amp;w=1300&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
          <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=1300&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
          <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&amp;w=768&amp;retina=true&amp;h=650&amp;crop=true&amp;k=c">
          <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=768&amp;retina=true&amp;h=650&amp;crop=true&amp;k=c">
          <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/8luiiucngz/webp/1800-workstation-sinks-jumbotron-L.webp?=90&amp;w=375&amp;retina=true&amp;h=175&amp;crop=true&amp;k=c">
          <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=375&amp;retina=true&amp;h=175&amp;crop=true&amp;k=c">
          <img class="nbhd-image nbhd-fluid nbhd-accordion-panel__image" src="https://moen.widen.net/content/8luiiucngz/jpeg/1800-workstation-sinks-jumbotron-L.jpeg?=90&amp;w=375&amp;retina=true&amp;h=175&amp;crop=true&amp;k=c" alt="" loading="lazy" >
        </picture>
      </div>
    </div>
  </div>
  <div class="nbhd-accordion-item nbhd-theme-overlay nbhd-accordion-item--overlay-50 ">
    <button class="nbhd-accordion-item__toggle nbhd-accordion-toggle" type="button" aria-expanded="false" aria-controls="nbhd-accordion-item-2">
      <span class="nbhd-accordion-toggle__content">
      <span class="nbhd-accordion-toggle__title">
        Pellentesque</span>
        <span class="nbhd-ui-control nbhd-accordion-toggle__expand">
          <span class="nbhd-ui-control__icon">
            <svg class="nbhd-svg-icon nbhd-ui-control__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
              <title>Expand</title>
              <g><path d="M11.768777,10.0002085 L19.6335286,2.13512894 C20.1221571,1.64689695 20.1221571,0.854718672 19.6335286,0.366486689 C19.1449,-0.12216223 18.3535886,-0.12216223 17.8649601,0.366486689 L10.0002085,8.23156622 L2.13503992,0.366486689 C1.64641137,-0.12216223 0.855099956,-0.12216223 0.36647141,0.366486689 C-0.122157137,0.854718672 -0.122157137,1.64689695 0.36647141,2.13512894 L8.23163995,10.0002085 L0.36647141,17.865288 C-0.122157137,18.35352 -0.122157137,19.1456983 0.36647141,19.6339302 C0.610785683,19.8778378 0.930979133,20 1.25075566,20 C1.5705322,20 1.89072565,19.8778378 2.13503992,19.6335133 L10.0002085,11.7684338 L17.8649601,19.6335133 C18.1092744,19.8778378 18.4294678,20 18.7492443,20 C19.0690209,20 19.3892143,19.8778378 19.6335286,19.6335133 C20.1221571,19.1452813 20.1221571,18.353103 19.6335286,17.8648711 L11.768777,10.0002085 Z"></path></g>
            </svg>
          </span>
        </span>
      </span>
      <picture class="nbhd-picture nbhd-fluid ">
        <source type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&amp;w=750&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
        <source type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=750&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
        <img class="nbhd-image nbhd-fluid nbhd-accordion-toggle__image" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=750&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c" alt="" width="750" height="750" loading="lazy" >
      </picture>
    </button>
    <div class="nbhd-accordion-panel nbhd-accordion-item__panel" id="nbhd-accordion-item-2" role="region" aria-label="Pellentesque">
      <button class="nbhd-accordion-close nbhd-ui-control nbhd-accordion-panel__close" type="button">
        <span class="nbhd-ui-control__icon">
          <svg class="nbhd-svg-icon nbhd-ui-control__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
            <title>close</title>
            <g><path d="M11.768777,10.0002085 L19.6335286,2.13512894 C20.1221571,1.64689695 20.1221571,0.854718672 19.6335286,0.366486689 C19.1449,-0.12216223 18.3535886,-0.12216223 17.8649601,0.366486689 L10.0002085,8.23156622 L2.13503992,0.366486689 C1.64641137,-0.12216223 0.855099956,-0.12216223 0.36647141,0.366486689 C-0.122157137,0.854718672 -0.122157137,1.64689695 0.36647141,2.13512894 L8.23163995,10.0002085 L0.36647141,17.865288 C-0.122157137,18.35352 -0.122157137,19.1456983 0.36647141,19.6339302 C0.610785683,19.8778378 0.930979133,20 1.25075566,20 C1.5705322,20 1.89072565,19.8778378 2.13503992,19.6335133 L10.0002085,11.7684338 L17.8649601,19.6335133 C18.1092744,19.8778378 18.4294678,20 18.7492443,20 C19.0690209,20 19.3892143,19.8778378 19.6335286,19.6335133 C20.1221571,19.1452813 20.1221571,18.353103 19.6335286,17.8648711 L11.768777,10.0002085 Z"></path></g>
          </svg>
        </span>
        <span class="nbhd-ui-control__label nbhd-accordion-close__label">
        Close</span>
      </button>
      <div class="nbhd-accordion-panel__detail nbhd-overlay">
        <div class="nbhd-accordion-detail">
          <h2 class="nbhd-title nbhd-accordion-panel__title">Pellentesque</h2>
          <div class="nbhd-content nbhd-accordion-panel__content">
            Nulla vitae elit libero, a pharetra augue.</div>
            <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-accordion-panel__cta" href="item-2-link" aria-label="learn more about this">Ultricies</a>
          </div>
        </div>
        <div class="nbhd-accordion-panel__visual">
          <picture class="nbhd-picture nbhd-fluid ">
            <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&amp;w=1300&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
            <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=1300&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
            <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&amp;w=768&amp;retina=true&amp;h=650&amp;crop=true&amp;k=c">
            <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=768&amp;retina=true&amp;h=650&amp;crop=true&amp;k=c">
            <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/ixn1km21ma/webp/house-jumbotron.webp?=90&amp;w=375&amp;retina=true&amp;h=175&amp;crop=true&amp;k=c">
            <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=375&amp;retina=true&amp;h=175&amp;crop=true&amp;k=c">
            <img class="nbhd-image nbhd-fluid nbhd-accordion-panel__image" src="https://moen.widen.net/content/ixn1km21ma/jpeg/house-jumbotron.jpeg?=90&amp;w=375&amp;retina=true&amp;h=175&amp;crop=true&amp;k=c" alt="" loading="lazy" >
          </picture>
        </div>
      </div>
    </div>
    <div class="nbhd-accordion-item nbhd-theme-overlay nbhd-accordion-item--overlay-35 ">
      <button class="nbhd-accordion-item__toggle nbhd-accordion-toggle" type="button" aria-expanded="false" aria-controls="nbhd-accordion-item-3">
        <span class="nbhd-accordion-toggle__content">
        <span class="nbhd-accordion-toggle__title">
          Egestas</span>
          <span class="nbhd-ui-control nbhd-accordion-toggle__expand">
            <span class="nbhd-ui-control__icon">
              <svg class="nbhd-svg-icon nbhd-ui-control__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve">
                <title>Expand</title>
                <g><path d="M11.768777,10.0002085 L19.6335286,2.13512894 C20.1221571,1.64689695 20.1221571,0.854718672 19.6335286,0.366486689 C19.1449,-0.12216223 18.3535886,-0.12216223 17.8649601,0.366486689 L10.0002085,8.23156622 L2.13503992,0.366486689 C1.64641137,-0.12216223 0.855099956,-0.12216223 0.36647141,0.366486689 C-0.122157137,0.854718672 -0.122157137,1.64689695 0.36647141,2.13512894 L8.23163995,10.0002085 L0.36647141,17.865288 C-0.122157137,18.35352 -0.122157137,19.1456983 0.36647141,19.6339302 C0.610785683,19.8778378 0.930979133,20 1.25075566,20 C1.5705322,20 1.89072565,19.8778378 2.13503992,19.6335133 L10.0002085,11.7684338 L17.8649601,19.6335133 C18.1092744,19.8778378 18.4294678,20 18.7492443,20 C19.0690209,20 19.3892143,19.8778378 19.6335286,19.6335133 C20.1221571,19.1452813 20.1221571,18.353103 19.6335286,17.8648711 L11.768777,10.0002085 Z"></path></g>
              </svg>
            </span>
          </span>
        </span>
        <picture class="nbhd-picture nbhd-fluid ">
          <source type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=750&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
          <source type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=750&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
          <img class="nbhd-image nbhd-fluid nbhd-accordion-toggle__image" src="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=750&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c" alt="" width="750" height="750" loading="lazy" >
        </picture>
      </button>
      <div class="nbhd-accordion-panel nbhd-accordion-item__panel" id="nbhd-accordion-item-3" role="region" aria-label="Egestas">
        <button class="nbhd-accordion-close nbhd-ui-control nbhd-accordion-panel__close" type="button">
          <span class="nbhd-ui-control__icon">
            <svg class="nbhd-svg-icon nbhd-ui-control__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
              <title>close</title>
              <g><path d="M11.768777,10.0002085 L19.6335286,2.13512894 C20.1221571,1.64689695 20.1221571,0.854718672 19.6335286,0.366486689 C19.1449,-0.12216223 18.3535886,-0.12216223 17.8649601,0.366486689 L10.0002085,8.23156622 L2.13503992,0.366486689 C1.64641137,-0.12216223 0.855099956,-0.12216223 0.36647141,0.366486689 C-0.122157137,0.854718672 -0.122157137,1.64689695 0.36647141,2.13512894 L8.23163995,10.0002085 L0.36647141,17.865288 C-0.122157137,18.35352 -0.122157137,19.1456983 0.36647141,19.6339302 C0.610785683,19.8778378 0.930979133,20 1.25075566,20 C1.5705322,20 1.89072565,19.8778378 2.13503992,19.6335133 L10.0002085,11.7684338 L17.8649601,19.6335133 C18.1092744,19.8778378 18.4294678,20 18.7492443,20 C19.0690209,20 19.3892143,19.8778378 19.6335286,19.6335133 C20.1221571,19.1452813 20.1221571,18.353103 19.6335286,17.8648711 L11.768777,10.0002085 Z"></path></g>
            </svg>
          </span>
          <span class="nbhd-ui-control__label nbhd-accordion-close__label">
          Close</span>
        </button>
        <div class="nbhd-accordion-panel__detail nbhd-overlay">
          <div class="nbhd-accordion-detail">
            <h2 class="nbhd-title nbhd-accordion-panel__title">Egestas</h2>
            <div class="nbhd-content nbhd-accordion-panel__content">
              Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</div>
              <a class="nbhd-link nbhd-button nbhd-button-primary nbhd-accordion-panel__cta" href="item-3-link" aria-label="learn more about this">Mollis</a>
            </div>
          </div>
          <div class="nbhd-accordion-panel__visual">
            <picture class="nbhd-picture nbhd-fluid ">
              <source media="(min-width: 1024px)" type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=1300&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
              <source media="(min-width: 1024px)" type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=1300&amp;retina=true&amp;h=750&amp;crop=true&amp;k=c">
              <source media="(min-width: 768px)" type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=768&amp;retina=true&amp;h=650&amp;crop=true&amp;k=c">
              <source media="(min-width: 768px)" type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=768&amp;retina=true&amp;h=650&amp;crop=true&amp;k=c">
              <source media="(max-width: 767px)" type="image/webp" srcset="https://moen.widen.net/content/dxp6rtujzc/webp/SmartWaterApp_Jumbotron.webp?=90&amp;w=375&amp;retina=true&amp;h=175&amp;crop=true&amp;k=c">
              <source media="(max-width: 767px)" type="image/jpeg" srcset="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=375&amp;retina=true&amp;h=175&amp;crop=true&amp;k=c">
              <img class="nbhd-image nbhd-fluid nbhd-accordion-panel__image" src="https://moen.widen.net/content/dxp6rtujzc/jpeg/SmartWaterApp_Jumbotron.jpg?=90&amp;w=375&amp;retina=true&amp;h=175&amp;crop=true&amp;k=c" alt="" loading="lazy" >
            </picture>
          </div>
        </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
Default 1300px x 750px

Component Properties

Name Type Default Description
componentID string ID attribute value for component.
cssClass string Additional CSS class(es) to add to component.
componentCompact boolean false Enable compact styling.
componentMarginTop none | small | medium | large none Add additional margin above the component. Small = 24px, Medium = 48px, Large = 96px.
componentMarginBottom none | small | medium | large none Add additional margin 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.
componentRenovation string The ability to alter and renovate the provided component CSS properties of the component.
itemTextAlignment left | center | right left Content alignment for content.
itemVerticalAlignment top | middle | bottom middle Content vertical alignment for content.
itemHorizontalAlignment left | center | right left Content horizontal alignment for content.
toggleVerticalAlignment top | middle | bottom middle Toggle vertical alignment for content.
toggleTextAlignment left | center | right left Toggle text alignment for content.

Item 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.
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.
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.

Elements

This component contains the following elements and their associated CSS Properties.

Integration Status

CSS Sap Commerce React
ready
ready
unavailable