text: const classes = require('src/gatsby/templates/snippets/classes').classes
  
  const html = /* HTML */ `
    <div class="demo--fade">
      <div class="xt-row xt-row-6">
        <div class="w-full">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-full">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-full md:w-6/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-full md:w-6/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-full md:w-6/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-full md:w-6/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-6/12 sm:w-4/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-6/12 sm:w-4/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-6/12 sm:w-4/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-6/12 sm:w-4/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-6/12 sm:w-4/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
  
        <div class="w-6/12 sm:w-4/12">
          <div
            class="*** xt-card *** rounded${classes.cardRadius()} ${classes.cardSm()} ${classes.textDefault()} ${classes.cardGray()}">
            <div class="xt-h5">Lorem ipsum</div>
            <p>
              <strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Nullam suscipit,
              velit eu tristique mollis, dui felis dictum turpis, a auctor est odio ac diam. Sed mauris augue, sagittis
              vitae magna eget, vehicula scelerisque elit.
            </p>
          </div>
        </div>
      </div>
    </div>
  `
  
  export const object = {
    html: html,
    container: true,
  }
  