Kartlar

Basit ve farklı görünümlerde 5 ayrı kart komponenti oluşturuldu. Kartların genişliği %100 olarak ayarlandı, herhangi bir kapsayıcı içerisine koyup o genişlikte kullanabilirsiniz.

Kart Başlığı

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

<div class="card">
  <div class="card-content">
    <h5 class="card-title">Kart Başlığı</h5>
    <div class="card-body">
      <p>Kart içeriği</p>
      <p>Kart içeriği</p>
      <p>Kart içeriği</p>
      <p>Kart içeriği</p>
      <p>Kart içeriği</p>
    </div>
  </div>
</div>

Görsel İçeren Dikey Kartlar

Görsel içeren dikey kartları kullanırken görselin üstte olmasını isterseniz .card classına ek olarak .card-media-top, altta olmasını isterseniz .card-media-bottom kullanabilirsiniz.

Kart Test Görsel
Kart Başlığı

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

  <div class="gra-s-wrapper">
    <div class="card card-media-top">
      <figure class="card-media-wrapper">
        <img class="img-object-fit" src="test-image.jpg" alt="Kart Test Görsel" />
      </figure>
      <div class="card-content">
        <h5 class="card-title">Kart Başlığı</h5>
        <div class="card-body">
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
        </div>
      </div>
    </div>
  </div>
Kart Test Görsel
Kart Başlığı

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

  <div class="gra-s-wrapper">
    <div class="card card-media-bottom">
      <figure class="card-media-wrapper">
        <img class="img-object-fit" src="test-image.jpg" alt="Kart Test Görsel" />
      </figure>
      <div class="card-content">
        <h5 class="card-title">Kart Başlığı</h5>
        <div class="card-body">
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
        </div>
      </div>
    </div>
  </div>

Görsel İçeren Yatay Kartlar

Görsel içeren yatay kartları kullanırken öncelikle .card classına ek olarak .card-horizontal classını eklemelisiniz. Bunun yanında görselin solda olmasını isterseniz .card-media-left , sağda olmasını isterseniz .card-media-right kullanabilirsiniz.

Kart Test Görsel
Kart Başlığı

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

  <div class="gra-s-wrapper">
    <div class="card card-horizontal card-media-left">
      <figure class="card-media-wrapper">
        <img class="img-object-fit" src="test-image.jpg" alt="Kart Test Görsel" />
      </figure>
      <div class="card-content">
        <h5 class="card-title">Kart Başlığı</h5>
        <div class="card-body">
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
        </div>
      </div>
    </div>
  </div>
Kart Test Görsel
Kart Başlığı

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

Kart içeriği

  <div class="gra-s-wrapper">
    <div class="card card-horizontal card-media-right">
      <figure class="card-media-wrapper">
        <img class="img-object-fit" src="test-image.jpg" alt="Kart Test Görsel" />
      </figure>
      <div class="card-content">
        <h5 class="card-title">Kart Başlığı</h5>
        <div class="card-body">
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
          <p>Kart içeriği</p>
        </div>
      </div>
    </div>
  </div>
🎧☕️❤️& Gralig ile yapıldı. © 2019