Kártyák

Szerző: Sallai András
Copyright © Sallai András, 2020
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Kártyákról

A Bootstrap 4-ben eltűnt a Panel, megjelent helyette a kártya. A kártya egy szegélyezett doboz, amely a tartalmat belső margóval veszi körül. Lehetőség van fejlécek, láblécek, tartalom és színek megadására.

Osztályok

.card
.card-body

Egyszerű kártya

<div class="card">
  <div class="card-body">Alap</div>
</div>

Fejléc és lábléc

<div class="card">
  <div class="card-header">Fejléc</div>
  <div class="card-body">Tartalom</div>
  <div class="card-footer">Lábléc</div>
</div>

Színezés

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

Hiperszöveges kártya

.card-title
.card-text
.card-body
.card-link

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Kártya címe</h4>
    <p class="card-text">Lorem ipsum dolor set amet</p>
    <a href="https://szit.hu" class="card-link">szit.hu</a>    
  </div>
</div>

Képkártya

.card-img-top
.card-img-bottom
.card-body

<div class="card" style="width:400px">
  <img class="card-img-top" src="kep.png" alt="janos_kepe.png">
  <div class="card-body">
    <h4 class="card-title">Nagy János</h4>
    <p class="card-text">Válassz egy embert</p>
    <a href="https://szit.hu" class="btn btn-primary">szit.hu</a>
  </div>
</div>

Nyúló linkek

Osztály:

.stretched-link

<a href="#" class="btn btn-primary stretched-link"></a>

Kártyakép rétegek

Osztály:

.card-img-overlay

<div class="card" style="width:500px">
  <img class="card-img-top" src="janos.png" alt="János képe">
  <div class="card-img-overlay">
    <h4 class="card-title">Nagy János</h4>
    <p class="card-text">Jelentkezz a Jánosnál</p>
    <a href="#" class="btn btn-primary">Néz meg a leírását</a>
  </div>
</div>

Kártyaoszlopok

Osztály:

.card-columns

<div class="card-columns">
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Egyik</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Másik</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Harmadik</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Negyedik</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Ötödik</p>
    </div>
  </div>
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Hatodik</p>
    </div>
  </div>
</div>

Díszkártyák

Osztály:

.card-deck

<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
</div>

Kártyacsoportok

Osztály:

.card-group

<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Lorem ipsum</p>
    </div>
  </div>
</div>