styleguide/styleguide-examples/card-grid.njk

  <div class="sumo-card-grid {{ modifier_class }}">
    <div class="scroll-wrap">
      <div class="card card--article">
          <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/reader-mode.svg') }}" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
      <div class="card card--article">
          <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/blog.svg') }}" alt="todo: title" />
          <div class="card--details">
            <h3 class="card--title">
              <a
                class="expand-this-link"
                href="#TODO"
              >
                Private Browsing Use Firefox without saving history
              </a>
            </h3>
            <p class="card--desc">
              Firefox Private Browsing is great for viewing website without saving
              things like cookies, but did you know there is more you can do? This
              text should be longer than needed, and will be truncated with CSS.
              Truncating at 40 words should be sufficient.
            </p>
          </div>
      </div>
    </div>
  </div>