Price Bar

Playground

React Usage

The React PriceBar component is composed of a number of sub-components. PriceBar itself typically has two children:

• PriceBarBanner - wrapper for the banner segments

• PriceBarMain - wrapper for the price, quantity, and main button

Banner

Inside of the PriceBarBanner there are 1 or more PriceBarBannerSegments.

Inside of each PriceBarBannerSegment there are sub-components:

• PriceBarBannerSegmentImage- image element with src, alt, ...

• PriceBarBannerSegmentText- element to hold the segment text. Rendered as div by default.

Main

Inside of the PriceBarMain there are more sub-components:

• PriceBarMainInfo- wrapper for price, VAT information, and a "link"

  • PriceBarPrice - price with currency, wrapper for info icon PriceBarPriceInfo

  • PriceBarInfoDetails- wrapper for VAT info and a button

• PriceBarButtons- wrapper for quantity and main buttons

  • PriceBarQuantity- wrapper for the quantity button (if the button opens a "panel"  modal dialog)

  • Dropdown- if the quantity button is a simple dropdown instead

  • PriceBarMainButton- main button for forward progression in the flow

Inside of the PriceBarInfoDetails there are more sub-components:

• PriceBarVat- VAT information (do not use with PriceBarCouponCallout)

• PriceBarCouponCallout- Coupon information (do not use with PriceBarVat)

• PriceBarLink- a button that looks like a link, leading to more information

Inside of the PriceBarQuantity there are more sub-components:

• PriceBarQuantityLabel- optional label for the button

• PriceBarQuantityAmount- text for inside the quantity button

vanilla usage

You don't have to use the React API, but all the current instances of Price Bar currently do. The vanilla API is similar to the React API, just using appropriate CSS classes. We recommended using a DOM inspector on the above live example to see those classes.

Variants

Coupon callout

You can use a coupon callout in place of the link. Replace PriceBarLink with a PriceBarCouponCallout.

Banner 1

Banner 2

$123.45

Use coupon 20PERCENTOFF

Qty

100Continue

React (Editable)

CopyFormat CodeLimited CodeShareCOLUMNReset

CopyFormat CodeLimited CodeShareCOLUMNReset

jsx

<PriceBar> <PriceBarBanner> <PriceBarBannerSegment> <PriceBarBannerSegmentImage alt="#1" src="https://via.placeholder.com/32/588da8/ffffff?text=1" /> <PriceBarBannerSegmentText>Banner 1</PriceBarBannerSegmentText> </PriceBarBannerSegment> <PriceBarBannerSegment> <PriceBarBannerSegmentImage alt="#2" src="https://via.placeholder.com/32/588da8/ffffff?text=2" /> <PriceBarBannerSegmentText>Banner 2</PriceBarBannerSegmentText> </PriceBarBannerSegment> </PriceBarBanner> <PriceBarMain> <PriceBarMainInfo> <PriceBarPrice> $123.45 <PriceBarPriceInfo /> </PriceBarPrice> <PriceBarInfoDetails> <PriceBarCouponCallout>Use coupon 20PERCENTOFF</PriceBarCouponCallout> </PriceBarInfoDetails> </PriceBarMainInfo> <PriceBarButtons> <PriceBarQuantity onClick={() => alert('Clicked Quantity button')}> <PriceBarQuantityLabel>Qty</PriceBarQuantityLabel> <PriceBarQuantityAmount>100</PriceBarQuantityAmount> </PriceBarQuantity> <PriceBarMainButton onClick={() => alert('Clicked Continue button')}> Continue </PriceBarMainButton> </PriceBarButtons> </PriceBarMain> </PriceBar>

<PriceBar>
  <PriceBarBanner>
    <PriceBarBannerSegment>
      <PriceBarBannerSegmentImage
        alt="#1"
        src="https://via.placeholder.com/32/588da8/ffffff?text=1"
      />
      <PriceBarBannerSegmentText>Banner 1</PriceBarBannerSegmentText>
    </PriceBarBannerSegment>
    <PriceBarBannerSegment>
      <PriceBarBannerSegmentImage
        alt="#2"
        src="https://via.placeholder.com/32/588da8/ffffff?text=2"
      />
      <PriceBarBannerSegmentText>Banner 2</PriceBarBannerSegmentText>
    </PriceBarBannerSegment>
  </PriceBarBanner>
  <PriceBarMain>
    <PriceBarMainInfo>
      <PriceBarPrice>
        $123.45
        <PriceBarPriceInfo />
      </PriceBarPrice>
      <PriceBarInfoDetails>
        <PriceBarCouponCallout>Use coupon 20PERCENTOFF</PriceBarCouponCallout>
      </PriceBarInfoDetails>
    </PriceBarMainInfo>
    <PriceBarButtons>
      <PriceBarQuantity onClick={() => alert('Clicked Quantity button')}>
        <PriceBarQuantityLabel>Qty</PriceBarQuantityLabel>
        <PriceBarQuantityAmount>100</PriceBarQuantityAmount>
      </PriceBarQuantity>
      <PriceBarMainButton onClick={() => alert('Clicked Continue button')}>
        Continue
      </PriceBarMainButton>
    </PriceBarButtons>
  </PriceBarMain>
</PriceBar>

Quantity dropdown

If the quantity button doesn't open a "panel" modal dialog but is instead a simple dropdown, replace PriceBarQuantity with a Dropdown.

Banner 1

Banner 2

$123.45

Inc. VAT

Shipping Excluded

100200300Continue

React (Editable)

CopyFormat CodeLimited CodeShareCOLUMNReset

CopyFormat CodeLimited CodeShareCOLUMNReset

jsx

<PriceBar> <PriceBarBanner> <PriceBarBannerSegment> <PriceBarBannerSegmentImage alt="#1" src="https://via.placeholder.com/32/588da8/ffffff?text=1" /> <PriceBarBannerSegmentText>Banner 1</PriceBarBannerSegmentText> </PriceBarBannerSegment> <PriceBarBannerSegment> <PriceBarBannerSegmentImage alt="#2" src="https://via.placeholder.com/32/588da8/ffffff?text=2" /> <PriceBarBannerSegmentText>Banner 2</PriceBarBannerSegmentText> </PriceBarBannerSegment> </PriceBarBanner> <PriceBarMain> <PriceBarMainInfo> <PriceBarPrice> $123.45 <PriceBarPriceInfo /> </PriceBarPrice> <PriceBarInfoDetails> <PriceBarVat>Inc. VAT</PriceBarVat> <PriceBarLink onClick={() => alert('Clicked Shipping Excluded button')}> Shipping Excluded </PriceBarLink> </PriceBarInfoDetails> </PriceBarMainInfo> <PriceBarButtons> <Dropdown rounded borderless> <DropdownOption>100</DropdownOption> <DropdownOption>200</DropdownOption> <DropdownOption>300</DropdownOption> </Dropdown> <PriceBarMainButton onClick={() => alert('Clicked Continue button')}> Continue </PriceBarMainButton> </PriceBarButtons> </PriceBarMain> </PriceBar>

<PriceBar>
  <PriceBarBanner>
    <PriceBarBannerSegment>
      <PriceBarBannerSegmentImage
        alt="#1"
        src="https://via.placeholder.com/32/588da8/ffffff?text=1"
      />
      <PriceBarBannerSegmentText>Banner 1</PriceBarBannerSegmentText>
    </PriceBarBannerSegment>
    <PriceBarBannerSegment>
      <PriceBarBannerSegmentImage
        alt="#2"
        src="https://via.placeholder.com/32/588da8/ffffff?text=2"
      />
      <PriceBarBannerSegmentText>Banner 2</PriceBarBannerSegmentText>
    </PriceBarBannerSegment>
  </PriceBarBanner>
  <PriceBarMain>
    <PriceBarMainInfo>
      <PriceBarPrice>
        $123.45
        <PriceBarPriceInfo />
      </PriceBarPrice>
      <PriceBarInfoDetails>
        <PriceBarVat>Inc. VAT</PriceBarVat>
        <PriceBarLink onClick={() => alert('Clicked Shipping Excluded button')}>
          Shipping Excluded
        </PriceBarLink>
      </PriceBarInfoDetails>
    </PriceBarMainInfo>
    <PriceBarButtons>
      <Dropdown rounded borderless>
        <DropdownOption>100</DropdownOption>
        <DropdownOption>200</DropdownOption>
        <DropdownOption>300</DropdownOption>
      </Dropdown>
      <PriceBarMainButton onClick={() => alert('Clicked Continue button')}>
        Continue
      </PriceBarMainButton>
    </PriceBarButtons>
  </PriceBarMain>
</PriceBar>

"show banner" option

By default, the banner segments will be hidden on Small and Extra-Small screens. However, an adaptive design might require that for these screens, the banner be shown elsewhere on the page, separate from the regular Price Bar.

In this case, you can create a second Price Bar in a second location on the page, and add the "show-banner" option, which will force that Price Bar to show its banner (and only its banner) on all screens.

Banner 1

Banner 2

Banner 3

React (Editable)

CopyFormat CodeLimited CodeShareCOLUMNReset

CopyFormat CodeLimited CodeShareCOLUMNReset

jsx

<PriceBar showBannerOnly> <PriceBarBanner> <PriceBarBannerSegment> <PriceBarBannerSegmentImage alt="#1" src="https://via.placeholder.com/32/588da8/ffffff?text=1" /> <PriceBarBannerSegmentText>Banner 1</PriceBarBannerSegmentText> </PriceBarBannerSegment> <PriceBarBannerSegment> <PriceBarBannerSegmentImage alt="#2" src="https://via.placeholder.com/32/588da8/ffffff?text=2" /> <PriceBarBannerSegmentText>Banner 2</PriceBarBannerSegmentText> </PriceBarBannerSegment> <PriceBarBannerSegment> <PriceBarBannerSegmentImage alt="#3" src="https://via.placeholder.com/32/588da8/ffffff?text=3" /> <PriceBarBannerSegmentText>Banner 3</PriceBarBannerSegmentText> </PriceBarBannerSegment> </PriceBarBanner> </PriceBar>

<PriceBar showBannerOnly>
  <PriceBarBanner>
    <PriceBarBannerSegment>
      <PriceBarBannerSegmentImage
        alt="#1"
        src="https://via.placeholder.com/32/588da8/ffffff?text=1"
      />
      <PriceBarBannerSegmentText>Banner 1</PriceBarBannerSegmentText>
    </PriceBarBannerSegment>
    <PriceBarBannerSegment>
      <PriceBarBannerSegmentImage
        alt="#2"
        src="https://via.placeholder.com/32/588da8/ffffff?text=2"
      />
      <PriceBarBannerSegmentText>Banner 2</PriceBarBannerSegmentText>
    </PriceBarBannerSegment>
    <PriceBarBannerSegment>
      <PriceBarBannerSegmentImage
        alt="#3"
        src="https://via.placeholder.com/32/588da8/ffffff?text=3"
      />
      <PriceBarBannerSegmentText>Banner 3</PriceBarBannerSegmentText>
    </PriceBarBannerSegment>
  </PriceBarBanner>
</PriceBar>

Components

Guidelines

Designer Guidelines

Banner icons should be 30 pixels tall.

Developer Guidelines

• The Price Bar is typically pinned or sticky to the top or the bottom of the page. The component can't do this automatically, because it doesn't know which element you want it to be pinned to, so you will need to pin it yourself. Typically this involves:

• If you want the bar pinned to the bottom of the window, place it in the page HTML as a direct child of the <body> tag or the.site-main element, and give the Price Bar position: fixed or position: sticky in your CSS, along with an appropriate CSS value such as bottom: 0. If you use position: fixed, you will likely want to place some empty space at the bottom of that parent element so that the Price Bar does not overlap other page content when the page is scrolled down all the way.

• If you want the bar sticky to the top of the window, place it in the page HTML as a direct child of the.site-main element, and give the Price Bar position: sticky in your CSS, along with an appropriate CSS value such as top: 0.

• You can also place a Price Bar inside a modal dialog, using instructions similar to those above.

Accessibility Guidelines

Remember that any Dropdown inside a Price Bar is still bound by the Dropdown's accessibility considerations — notably, that the dropdown needs an accessible labeling element, even if that element is visually hidden. 

.