s72

    • Pricing card

    article > data

    A pricing card is an ordinary card with a <data> element for the price. The value attribute holds the number, the text holds what the reader sees.

    Basic

    Open source €0 forever
    • Markdown and templates
    • Live reload
    • atlas deploy
    Install atlas
    Teams €12 per seat, per month
    • Everything in open source
    • Hosted previews
    • Shared themes
    Join the waitlist
    html
    <div data-grid="2">
  <article>
    <small>Open source</small>
    <data value="0">€0</data>
    <small>forever</small>
    <ul><li>Markdown and templates</li><li>Live reload</li><li><code>atlas deploy</code></li></ul>
    <a role="button" href="#install">Install atlas</a>
  </article>
  <article>
    <small>Teams</small>
    <data value="12">€12</data>
    <small>per seat, per month</small>
    <ul><li>Everything in open source</li><li>Hosted previews</li><li>Shared themes</li></ul>
    <a role="button" data-variant="line" href="#waitlist">Join the waitlist</a>
  </article>
</div>

    The action drops to the bottom of the card on its own, so two cards with lists of different lengths still line their buttons up.

    Notes