Component | Selling Points

styleKeysellingPoints

Develop

Selling Points is a marketing component used to provide persuasive arguments about Vistaprint or a Vistaprint service. It consists of two parts:

a section on the left with a heading, and (optional) additional text below it.
a section on the right of selling point features. Each feature must have a title; optionally, each may also contain an icon and/or a description.

The Selling Points component works with the layout grid to arrange and align its subsections.

the Selling Points heading

Additional text goes here. For more than 20 years, Vistaprint has helped small business owners, entrepreneurs and dreamers create expertly designed custom marketing. Our website is intended to help you find the products you need – business cards, promotional products and more – and to create a look you love.

Feature Title

The feature's description. Upload your artwork and make changes with our professional designers for free.

Feature Title

The feature's description. Upload your artwork and make changes with our professional designers for free.

Feature Title

The feature's description. Upload your artwork and make changes with our professional designers for free.

Feature Title

The feature's description. Upload your artwork and make changes with our professional designers for free.

Feature Title

The feature's description. Upload your artwork and make changes with our professional designers for free.

Feature Title

The feature's description. Upload your artwork and make changes with our professional designers for free.

<SellingPoints marginY={{ xs: 10, sm: 10, md: 11, lg: 11 }}>
  <GridContainer>
    <Row>
      <Column span={4} offsetLg={1} spanSm={6}>
        <SellingPointsHeading>the Selling Points heading</SellingPointsHeading>
        <p>
          Additional text goes here. For more than 20 years, Vistaprint has
          helped small business owners, entrepreneurs and dreamers create
          expertly designed custom marketing. Our website is intended to help
          you find the products you need – business cards, promotional products
          and more – and to create a look you love.
        </p>
      </Column>
      <Column
        span={5}
        offset={1}
        spanMd={7}
        offsetMd={1}
        spanSm={6}
        offsetSm={0}
      >
        <SellingPointsFeatures>
          <Row>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=1" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=2" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=3" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=4" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=5" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=6" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
          </Row>
        </SellingPointsFeatures>
      </Column>
    </Row>
  </GridContainer>
</SellingPoints><SellingPoints marginY={{ xs: 10, sm: 10, md: 11, lg: 11 }}>
  <GridContainer>
    <Row>
      <Column span={4} offsetLg={1} spanSm={6}>
        <SellingPointsHeading>the Selling Points heading</SellingPointsHeading>
        <p>
          Additional text goes here. For more than 20 years, Vistaprint has
          helped small business owners, entrepreneurs and dreamers create
          expertly designed custom marketing. Our website is intended to help
          you find the products you need – business cards, promotional products
          and more – and to create a look you love.
        </p>
      </Column>
      <Column
        span={5}
        offset={1}
        spanMd={7}
        offsetMd={1}
        spanSm={6}
        offsetSm={0}
      >
        <SellingPointsFeatures>
          <Row>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=1" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=2" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=3" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=4" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=5" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
            <Column span={6} spanSm={12}>
              <SellingPointsFeature>
                <SellingPointsFeatureIconContainer>
                  <img src="https://picsum.photos/48/48?q=6" alt="" />
                </SellingPointsFeatureIconContainer>
                <SellingPointsFeatureTitle>
                  Feature Title
                </SellingPointsFeatureTitle>
                <SellingPointsFeatureDescription>
                  The feature&apos;s description. Upload your artwork and make
                  changes with our professional designers for free.
                </SellingPointsFeatureDescription>
              </SellingPointsFeature>
            </Column>
          </Row>
        </SellingPointsFeatures>
      </Column>
    </Row>
  </GridContainer>
</SellingPoints>

<div class="my-10 my-10-sm my-11-md my-11-lg selling-points">
  <div class="grid-container">
    <div class="row">
      <div class="col-4 col-sm-6 col-lg-offset-1">
        <p class="selling-points-heading">the Selling Points heading</p>
        <p>Additional text goes here.</p>
      </div>
      <div
        class="
          col-5 col-sm-6 col-md-7 col-offset-1 col-sm-offset-0 col-md-offset-1
        "
      >
        <ul class="selling-points-features">
          <div class="row">
            <div class="col-6 col-sm-12">
              <li class="selling-points-feature">
                <div class="selling-points-feature-icon-container">
                  <img src="https://picsum.photos/48/48?q=1" alt="" />
                </div>
                <p class="selling-points-feature-name">Feature Title</p>
                <p class="selling-points-feature-description">
                  The feature's description.
                </p>
              </li>
            </div>
            <div class="col-6 col-sm-12">
              <li class="selling-points-feature">
                <div class="selling-points-feature-icon-container">
                  <img src="https://picsum.photos/48/48?q=1" alt="" />
                </div>
                <p class="selling-points-feature-name">Feature Title</p>
                <p class="selling-points-feature-description">
                  The feature's description.
                </p>
              </li>
            </div>
            <div class="col-6 col-sm-12">
              <li class="selling-points-feature">
                <div class="selling-points-feature-icon-container">
                  <img src="https://picsum.photos/48/48?q=1" alt="" />
                </div>
                <p class="selling-points-feature-name">Feature Title</p>
                <p class="selling-points-feature-description">
                  The feature's description.
                </p>
              </li>
            </div>
            <div class="col-6 col-sm-12">
              <li class="selling-points-feature">
                <div class="selling-points-feature-icon-container">
                  <img src="https://picsum.photos/48/48?q=1" alt="" />
                </div>
                <p class="selling-points-feature-name">Feature Title</p>
                <p class="selling-points-feature-description">
                  The feature's description.
                </p>
              </li>
            </div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</div>

Note how the component uses the layout grid to create a row with two sections, one on the left (for the heading and text) and one on the right. Inside that right section, it then uses a second grid row to hold the selling point features. The grid's column spans determine how many features will fit per row; typically we show two features per row on a desktop, three if they have no descriptions.

Note that the margin above and below the Selling Points component are defined inline. The values shown here are expected values, but the margins have not been baked into the component to give each page flexibility as needed.