s72

    • Image card

    article > img

    An <img> as the first child of a card in a grid runs to the card's edges and takes a 16:9 crop. Everything after it is an ordinary card.

    Basic

    Asset pipeline

    Resize and fingerprint images as part of the build.

    Planned

    No picture needed

    A card without an image sits beside one with it and ends on the same line.

    Stable
    html
    <div data-grid="2">
  <article>
    <img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23C9CFEA'/%3E%3Crect x='24' y='24' width='120' height='132' fill='%233A55B4'/%3E%3Ccircle cx='220' cy='90' r='54' fill='%232F7A5F'/%3E%3C/svg%3E">
    <h3>Asset pipeline</h3>
    <p>Resize and fingerprint images as part of the build.</p>
    <small>Planned</small>
  </article>
  <article>
    <h3>No picture needed</h3>
    <p>A card without an image sits beside one with it and ends on the same line.</p>
    <small>Stable</small>
  </article>
</div>

    The image is pulled out past the card's padding, so it meets the card's own corners.

    Notes