{{#> web/layout/default title="Card" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">General Options</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">

        <article class="Card Card--vertical">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Eyebrow title</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Basic card
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <div class="link-primary link-underlined">Read more</div>
            <!-- End user content -->
          </div>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Eyebrow title</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Boxed card
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--auto CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Eyebrow title</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Boxed card, expanded media
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <button type="button" class="Button Button--medium Button--primary">Primary</button>
            <button type="button" class="Button Button--medium Button--secondary">Secondary</button>
          </footer>
        </article>

      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Content Options</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Content options</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Image and text
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardLogo">
            <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
              {{> web/assets/jobBoardLogo }}
            </div>
          </div>
          <div class="CardBody CardBody--selectable">
            <div class="CardEyebrow">Content options</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Image, logo and selectable text
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              <video
                src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
                poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg"
                controls
                muted
                playsinline
              ></video>
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Content options</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#">
                Video and text
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardArtwork CardArtwork--alignmentXLeft">
            <!-- User content, no component classes -->
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <!-- End user content -->
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Content options</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Artwork and text
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardBody">
            <div class="CardEyebrow">Content options</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Text
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <ul class="pl-1000">
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetuer adipiscing elit</li>
              <li>Aenean fermentum risus id tortor</li>
            </ul>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardBody">
            <div class="CardEyebrow">Content options</div>
            <h4 class="CardTitle CardTitle--heading">
              Text only
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <ul class="pl-1000">
              <li>Lorem ipsum dolor sit amet</li>
              <li>Consectetuer adipiscing elit</li>
              <li>Aenean fermentum risus id tortor</li>
            </ul>
            <!-- End user content -->
          </div>
        </article>

      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Logo</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">

        <article class="Card Card--vertical">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardLogo">
            <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
              {{> web/assets/jobBoardLogo }}
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Logo</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Basic card with media and logo
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardLogo">
            <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
              {{> web/assets/jobBoardLogo }}
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Logo</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Boxed card with media and logo
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--auto CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardLogo">
            <div class="PartnerLogo PartnerLogo--medium PartnerLogo--safeArea">
              {{> web/assets/jobBoardLogo }}
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Logo</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Boxed card with expanded media and logo
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Horizontal Card Layout</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--desktop--cols-2">

        <article class="Card Card--horizontal Card--boxed">
          <div class="CardMedia CardMedia--medium CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Horizontal card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Media and text
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--horizontal Card--boxed">
          <div class="CardMedia CardMedia--medium CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardLogo">
            <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
              {{> web/assets/jobBoardLogo }}
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Horizontal card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Media, logo and text
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--horizontal Card--boxed">
          <div class="CardArtwork CardArtwork--alignmentXLeft">
            <!-- User content, no component classes -->
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <!-- End user content -->
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Horizontal card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              Artwork and text
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--horizontal Card--boxed">
          <div class="CardArtwork CardArtwork--alignmentXLeft">
            <!-- User content, no component classes -->
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <!-- End user content -->
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Horizontal card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              Artwork and text
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Reversed Horizontal Card Layout</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--desktop--cols-2">

        <article class="Card Card--horizontalReversed Card--boxed">
          <div class="CardMedia CardMedia--medium CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Horizontal reversed card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Media and text
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--horizontalReversed Card--boxed">
          <div class="CardMedia CardMedia--medium CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardLogo">
            <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
              {{> web/assets/jobBoardLogo }}
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Horizontal reversed card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Media, logo and text
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--horizontalReversed Card--boxed">
          <div class="CardArtwork CardArtwork--alignmentXLeft">
            <!-- User content, no component classes -->
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <!-- End user content -->
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Horizontal reversed card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              Artwork and text
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--horizontalReversed Card--boxed">
          <div class="CardArtwork CardArtwork--alignmentXLeft">
            <!-- User content, no component classes -->
            <svg width="24" height="24" aria-hidden="true">
              <use xlink:href="/assets/icons/svg/sprite.svg#file" />
            </svg>
            <!-- End user content -->
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Horizontal reversed card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              Artwork and text
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Responsive Card Layout</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--desktop--cols-2">

        <article class="Card Card--vertical Card--tablet--horizontal Card--desktop--horizontalReversed Card--boxed">
          <div class="CardMedia CardMedia--medium">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardLogo">
            <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
              {{> web/assets/jobBoardLogo }}
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Responsive card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Vertical → horizontal → reversed horizontal
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--tablet--horizontal Card--desktop--horizontalReversed Card--boxed">
          <div class="CardMedia CardMedia--medium CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardLogo">
            <div class="PartnerLogo PartnerLogo--small PartnerLogo--safeArea">
              {{> web/assets/jobBoardLogo }}
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Responsive card layout</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Vertical → horizontal → reversed horizontal, expanded media
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Media Options</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4" style="grid-auto-flow: dense">
        <div class="GridItem d-grid" style="--grid-item-row-end-desktop: span 2">

          <article class="Card Card--vertical Card--boxed">
            <div class="CardMedia CardMedia--auto">
              <div class="CardMedia__canvas">
                <!-- User content, no component classes -->
                {{> web/assets/spiritCoverOnBrand }}
                <!-- End user content -->
              </div>
            </div>
            <div class="CardBody">
              <div class="CardEyebrow">Media options</div>
              <h4 class="CardTitle CardTitle--heading">
                <a href="#" class="CardLink">
                  Auto size
                </a>
              </h4>
              <!-- User content, no component classes -->
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
              <!-- End user content -->
            </div>
            <footer class="CardFooter CardFooter--alignmentXLeft">
              <a href="#" class="Button Button--medium Button--primary">Primary</a>
              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
            </footer>
          </article>

        </div>
        <div class="GridItem d-grid" style="--grid-item-row-end-desktop: span 2">

          <article class="Card Card--vertical Card--boxed">
            <div class="CardMedia CardMedia--auto CardMedia--expanded CardMedia--filledHeight">
              <div class="CardMedia__canvas">
                <!-- User content, no component classes -->
                {{> web/assets/spiritCoverOnBrand }}
                <!-- End user content -->
              </div>
            </div>
            <div class="CardBody">
              <div class="CardEyebrow">Media options</div>
              <h4 class="CardTitle CardTitle--heading">
                <a href="#" class="CardLink">
                  Auto size, expanded
                </a>
              </h4>
              <!-- User content, no component classes -->
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
              <!-- End user content -->
            </div>
            <footer class="CardFooter CardFooter--alignmentXLeft">
              <a href="#" class="Button Button--medium Button--primary">Primary</a>
              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
            </footer>
          </article>

        </div>
        <div class="GridItem d-grid" style="--grid-item-column-end-tablet: span 2">

          <article class="Card Card--horizontal Card--boxed">
            <div class="CardMedia CardMedia--medium">
              <div class="CardMedia__canvas">
                <!-- User content, no component classes -->
                {{> web/assets/spiritCoverOnBrand }}
                <!-- End user content -->
              </div>
            </div>
            <div class="CardBody">
              <div class="CardEyebrow">Media options</div>
              <h4 class="CardTitle CardTitle--heading">
                <a href="#" class="CardLink">
                  Medium size
                </a>
              </h4>
              <!-- User content, no component classes -->
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
              <!-- End user content -->
            </div>
            <footer class="CardFooter CardFooter--alignmentXLeft">
              <a href="#" class="Button Button--medium Button--primary">Primary</a>
              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
            </footer>
          </article>

        </div>
        <div class="GridItem d-grid" style="--grid-item-column-end-tablet: span 2">

          <article class="Card Card--horizontal Card--boxed">
            <div class="CardMedia CardMedia--medium CardMedia--filledHeight">
              <div class="CardMedia__canvas">
                <!-- User content, no component classes -->
                {{> web/assets/spiritCoverOnBrand }}
                <!-- End user content -->
              </div>
            </div>
            <div class="CardBody">
              <div class="CardEyebrow">Media options</div>
              <h4 class="CardTitle CardTitle--heading">
                <a href="#" class="CardLink">
                  Medium size, filled height
                </a>
              </h4>
              <!-- User content, no component classes -->
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
              <!-- End user content -->
            </div>
            <footer class="CardFooter CardFooter--alignmentXLeft">
              <a href="#" class="Button Button--medium Button--primary">Primary</a>
              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
            </footer>
          </article>

        </div>
        <div class="GridItem d-grid" style="--grid-item-column-end-tablet: span 2; --grid-item-column-end-desktop: span 4">

          <article class="Card Card--horizontal Card--boxed">
            <div class="CardMedia CardMedia--medium CardMedia--expanded">
              <div class="CardMedia__canvas">
                <!-- User content, no component classes -->
                {{> web/assets/spiritCoverOnBrand }}
                <!-- End user content -->
              </div>
            </div>
            <div class="CardBody">
              <div class="CardEyebrow">Media options</div>
              <h4 class="CardTitle CardTitle--heading">
                <a href="#" class="CardLink">
                  Medium size, expanded
                </a>
              </h4>
              <!-- User content, no component classes -->
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
              <!-- End user content -->
            </div>
            <footer class="CardFooter CardFooter--alignmentXLeft">
              <a href="#" class="Button Button--medium Button--primary">Primary</a>
              <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
            </footer>
          </article>

        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Media Sizes</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3 mb-1200">

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--small CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Media size</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Small
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--medium CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Media size</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Medium
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--large CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Media size</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Large
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardMedia CardMedia--auto CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Media size</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Auto
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

      </div>

      <div class="Grid Grid--cols-1">

        <article class="Card Card--horizontal Card--boxed">
          <div class="CardMedia CardMedia--small CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Media size</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Small
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--horizontal Card--boxed">
          <div class="CardMedia CardMedia--medium CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Media size</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Medium
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--horizontal Card--boxed">
          <div class="CardMedia CardMedia--large CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Media size</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Large
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--horizontal Card--boxed">
          <div class="CardMedia CardMedia--auto CardMedia--expanded">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              {{> web/assets/spiritCoverOnBrand }}
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <div class="CardEyebrow">Media size</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Auto
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Title Options</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">

        <article class="Card Card--vertical">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              <a href="#" aria-hidden="true">
                {{> web/assets/spiritCoverOnBrand }}
              </a>
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <h4 class="CardTitle">
              <a href="#" class="link-primary">
                Body-style primary link
              </a>
            </h4>
          </div>
        </article>

        <article class="Card Card--vertical">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              <a href="#" aria-hidden="true">
                {{> web/assets/spiritCoverOnBrand }}
              </a>
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <h4 class="CardTitle">
              <a href="#" class="link-secondary">
                Body-style secondary link
              </a>
            </h4>
          </div>
        </article>

        <article class="Card Card--vertical">
          <div class="CardMedia CardMedia--auto">
            <div class="CardMedia__canvas">
              <!-- User content, no component classes -->
              <a href="#" aria-hidden="true">
                {{> web/assets/spiritCoverOnBrand }}
              </a>
              <!-- End user content -->
            </div>
          </div>
          <div class="CardBody">
            <h4 class="CardTitle CardTitle--heading">
              <a href="#">
                Heading-style primary link
              </a>
            </h4>
          </div>
        </article>

      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Footer Alignment</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">

        <article class="Card Card--vertical Card--boxed">
          <div class="CardBody">
            <div class="CardEyebrow">Footer alignment</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Left
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardBody">
            <div class="CardEyebrow">Footer alignment</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Center
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXCenter">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardBody">
            <div class="CardEyebrow">Footer alignment</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Right
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXRight">
            <a href="#" class="Button Button--medium Button--primary">Primary</a>
            <a href="#" class="Button Button--medium Button--secondary">Secondary</a>
          </footer>
        </article>

      </div>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Footer Content</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">

        <article class="Card Card--vertical Card--boxed">
          <div class="CardBody">
            <div class="CardEyebrow">Footer content</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Links
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#" class="link-primary">Primary</a>
            <a href="#" class="link-secondary">Secondary</a>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardBody">
            <div class="CardEyebrow">Footer content</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Icon buttons
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <button type="button" class="Button Button--plain Button--medium Button--symmetrical">
              <span class="accessibility-hidden">Add</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#add" />
              </svg>
            </button>
            <button type="button" class="Button Button--plain Button--medium Button--symmetrical">
              <span class="accessibility-hidden">Edit</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#edit" />
              </svg>
            </button>
            <button type="button" class="Button Button--plain Button--medium Button--symmetrical">
              <span class="accessibility-hidden">Help</span>
              <svg width="24" height="24" aria-hidden="true">
                <use xlink:href="/assets/icons/svg/sprite.svg#help" />
              </svg>
            </button>
          </footer>
        </article>

        <article class="Card Card--vertical Card--boxed">
          <div class="CardBody">
            <div class="CardEyebrow">Footer content</div>
            <h4 class="CardTitle CardTitle--heading">
              <a href="#" class="CardLink">
                Custom footer
              </a>
            </h4>
            <!-- User content, no component classes -->
            <p>Lorem ipsum dolor sit amet.</p>
            <!-- End user content -->
          </div>
          <footer class="CardFooter CardFooter--alignmentXLeft">
            <a href="#jiri-barta" class="link-primary link-not-underlined">
              <div class="Flex Flex--row Flex--noWrap Flex--alignmentXStretch Flex--alignmentYStretch">
                <div class="UNSTABLE_Avatar UNSTABLE_Avatar--large" aria-label="Profile of Jiří Bárta">
                  <img src="https://media.licdn.com/dms/image/v2/C4D03AQG7vmijKairYA/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1620064696692?e=1737590400&v=beta&t=r0jUkDJnh8reIhDzUaMsofW__vgNhLlydEiK8K5RMYU" alt="Jiří Bárta" aria-hidden="true" />
                </div>
                <div>
                  <div class="typography-body-small-semibold text-primary">Jiří Bárta</div>
                  <div class="typography-body-small-regular text-tertiary">Senior UI Designer</div>
                </div>
              </div>
            </a>
          </footer>
        </article>

      </div>
    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Text Cards</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul
        class="Grid Grid--cols-2 Grid--desktop--cols-4"
        style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000); --grid-spacing-y-tablet: var(--spirit-space-1100)"
      >

        <li class="Card Card--vertical">
          <div class="CardBody">
            <div class="CardEyebrow">Eyebrow title</div>
            <h4 class="CardTitle CardTitle--heading">
              Text card heading
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
          </div>
        </li>

        <li class="Card Card--vertical">
          <div class="CardBody">
            <div class="CardEyebrow">Eyebrow title</div>
            <h4 class="CardTitle CardTitle--heading">
              Text card heading
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
          </div>
        </li>

        <li class="Card Card--vertical">
          <div class="CardBody">
            <div class="CardEyebrow">Eyebrow title</div>
            <h4 class="CardTitle CardTitle--heading">
              Text card heading
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
          </div>
        </li>

        <li class="Card Card--vertical">
          <div class="CardBody">
            <div class="CardEyebrow">Eyebrow title</div>
            <h4 class="CardTitle CardTitle--heading">
              Text card heading
            </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean fermentum risus id tortor. Integer lacinia. Sed vel lectus.</p>
          </div>
        </li>

      </ul>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Custom Cards</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4">

        <li class="Card Card--horizontalReversed Card--boxed">
          <div class="CardArtwork">
            <a href="#" class="CardLink">
              <div class="PartnerLogo PartnerLogo--small">
                {{> web/assets/jobBoardLogo }}
              </div>
            </a>
          </div>
          <div class="CardBody">
            <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
          </div>
        </li>

        <li class="Card Card--horizontalReversed Card--boxed">
          <div class="CardArtwork">
            <a href="#" class="CardLink">
              <div class="PartnerLogo PartnerLogo--small">
                {{> web/assets/jobBoardLogo }}
              </div>
            </a>
          </div>
          <div class="CardBody">
            <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
          </div>
        </li>

        <li class="Card Card--horizontalReversed Card--boxed">
          <div class="CardArtwork">
            <a href="#" class="CardLink">
              <div class="PartnerLogo PartnerLogo--small">
                {{> web/assets/jobBoardLogo }}
              </div>
            </a>
          </div>
          <div class="CardBody">
            <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
          </div>
        </li>

        <li class="Card Card--horizontalReversed Card--boxed">
          <div class="CardArtwork">
            <a href="#" class="CardLink">
              <div class="PartnerLogo PartnerLogo--small">
                {{> web/assets/jobBoardLogo }}
              </div>
            </a>
          </div>
          <div class="CardBody">
            <span class="Tag Tag--neutral Tag--subtle Tag--small">Tag</span>
          </div>
        </li>

      </ul>

    </div>

  </div>

</section>

{{/web/layout/default }}