Pricing Table

Notes:

<section class="ps ps-pricing-table">
    <div class="ps__wrap">
        <div class="ps__head">
            <header class="ps__header">
                <span class="ps__kicker">Features</span>
                <h2 class="ps__title" aria-level="">Choose a Plan</h2>
            </header>
            <div class="ps__desc">
                <p>
                    Choose the plan that works for you and streamline your design process in an unlimited number of projects.
                </p>
            </div>
        </div>

        <div class="ps__main">
            <ol role="list" aria-label="" class="ps-pricing-table__options ps__card-list">
                <li class="ps-pricing-table__option ps__card-item ps__card-item--full">
                    <article>
                        <header>
                            <h3 class="ps-pricing-table__option__title ps__card-item__title">Small</h3>
                            <span class="ps-pricing-table__option__price">Free</span>
                        </header>
                        <div class="ps__card-item__content">
                            <ul role="list" class="ps-pricing-table__option__features" aria-label="">
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Figma and Sketch Files
                                </li>
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Auto-Updatable Styles
                                </li>
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Base Elements
                                </li>
                                <li class="ps-pricing-table__option__feature not-included">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M5 9v2h10v-2h-10zm5-9c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Not included: </span> Page Layouts
                                </li>
                                <li class="ps-pricing-table__option__feature not-included">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M5 9v2h10v-2h-10zm5-9c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Not included: </span> 24/7 Free Support
                                </li>
                            </ul>
                        </div>
                        <div class="ps__card-item__cta">
                            <a href="#" class="ps-button ps-button--secondary">Call to Action</a>
                        </div>
                    </article>
                </li>
                <li class="ps-pricing-table__option ps__card-item ps__card-item--full">
                    <article>
                        <header>
                            <h3 class="ps-pricing-table__option__title ps__card-item__title">Medium</h3>
                            <span class="ps-pricing-table__option__price">From $18</span>
                        </header>
                        <div class="ps__card-item__content">
                            <ul role="list" class="ps-pricing-table__option__features" aria-label="">
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Figma and Sketch Files</li>
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Auto-Updatable Styles</li>
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Base Elements</li>
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Page Layouts</li>
                                <li class="ps-pricing-table__option__feature not-included">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M5 9v2h10v-2h-10zm5-9c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Not included: </span> 24/7 Free Support
                                </li>
                            </ul>
                        </div>

                        <div class="ps__card-item__cta">
                            <a href="#" class="ps-button ps-button--secondary">Call to Action</a>
                        </div>
                    </article>
                </li>
                <li class="ps-pricing-table__option ps__card-item ps__card-item--full">
                    <article>
                        <header>
                            <h3 class="ps-pricing-table__option__title ps__card-item__title">Large</h3>
                            <span class="ps-pricing-table__option__price">From $39</span>
                        </header>
                        <div class="ps__card-item__content">
                            <ul role="list" class="ps-pricing-table__option__features" aria-label="">
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Figma and Sketch Files</li>
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Auto-Updatable Styles</li>
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Base Elements</li>
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> Page Layouts</li>
                                <li class="ps-pricing-table__option__feature">
                                    <svg class="feature-icon" aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <g fill="none">
                      <path d="M-2-2h24v24h-24z" />
                      <path
                        d="M10 0c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm-2 15l-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42-9 9z"
                        fill="currentColor" fill-rule="nonzero" />
                    </g>
                  </svg>
                                    <span class="sr-only">Included: </span> 24/7 Free Support</li>
                            </ul>
                        </div>

                        <div class="ps__card-item__cta">
                            <a href="#" class="ps-button ps-button--secondary">Call to Action</a>
                        </div>
                    </article>
                </li>
            </ol>
        </div>
    </div>
</section>
  • Content: 
    .ps-pricing-table__option {
  @media all and (min-width: 40em) {
    &:nth-of-type(2) {
      background-color: #fff;
      border: 1px solid;
    }
  }
}

.ps-pricing-table__option__price {
  display: block;
  color: var(--color-text-grey);
}

.ps-pricing-table__option__features {
  list-style: none;
  padding: 0;
}

.ps-pricing-table__option__feature {
  margin-bottom: 1em;
  padding-left: 2rem;
  position: relative;

  .feature-icon {
    color: var(--color--primary);

    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -.5em;
  }

  &.not-included {
    .feature-icon {
      color: #888;
    }
  }
}
  • URL: /components/raw/pricing-table/pricing-table.scss
  • Filesystem Path: src/components/pricing-table/pricing-table.scss
  • Size: 678 Bytes
  • Content: 
    title: Disclosure Widget
status: ready
# notes: "You can have a note here; it will override the README.md notes"
context:
  text: disclosure ipsum
  • URL: /components/raw/pricing-table/pricing-table.yml
  • Filesystem Path: src/components/pricing-table/pricing-table.yml
  • Size: 147 Bytes