Card

SysaCSS Card Classes

SysaCSS provides the following classes for displaying paper-like cards:

Variable Value
ss-hvr-card Same as ss-card
ss-card Same as ss-card-1
ss-card-1
ss-card-2
ss-card-3
ss-card-4
ss-card-5

ss-card

<div class="ss-card">
  <img src="/img/card.jpg" alt="Alps">
  <div class="ss-container ss-center">
    <p>This is the Image Caption</p>
  </div>
</div>

ss-hvr-card

<div class="ss-card">
  <img src="/img/card.jpg" alt="Alps">
  <div class="ss-container ss-center">
    <p>This is the Image Caption</p>
  </div>
</div>

ss-card-1

<div class="ss-card-1">
  <img src="/img/card.jpg" alt="Alps">
  <div class="ss-container ss-center">
    <p>This is the Image Caption</p>
  </div>
</div>

ss-card-2

<div class="ss-card-2">
  <img src="/img/card.jpg" alt="Alps">
  <div class="ss-container ss-center">
    <p>This is the Image Caption</p>
  </div>
</div>

ss-card-3

<div class="ss-card-3">
  <img src="/img/card.jpg" alt="Alps">
  <div class="ss-container ss-center">
    <p>This is the Image Caption</p>
  </div>
</div>

ss-card-4

<div class="ss-card-4">
  <img src="/img/card.jpg" alt="Alps">
  <div class="ss-container ss-center">
    <p>This is the Image Caption</p>
  </div>
</div>

ss-card-5

<div class="ss-card-5">
  <img src="/img/card.jpg" alt="Alps">
  <div class="ss-container ss-center">
    <p>This is the Image Caption</p>
  </div>
</div>