ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
Check
in English

ꯀꯥꯔꯗꯁꯤꯡ ꯄꯤꯕꯥ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯚꯦꯔꯤꯑꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯇꯦꯟꯁꯤꯕꯜ ꯀꯟꯇꯦꯟꯇ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ ꯄꯤꯔꯤ꯫

ꯃꯔꯝꯗꯤ

ꯀꯥꯔꯗ ꯍꯥꯌꯕꯁꯤ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯇꯦꯟꯁꯤꯕꯜ ꯀꯟꯇꯦꯟꯇ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯗꯥ ꯍꯦꯗ ꯑꯃꯁꯨꯡ ꯐꯨꯇꯔꯁꯤꯡꯒꯤ ꯑꯣꯄꯁꯅꯁꯤꯡ, ꯃꯈꯜ ꯀꯌꯥꯒꯤ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ, ꯀꯟꯇꯦꯛꯁꯆꯨꯑꯦꯜ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯃꯆꯨꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯁꯛꯇꯤ ꯂꯩꯕꯥ ꯗꯤꯁꯞꯂꯦ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯳ ꯑꯁꯤ ꯈꯉꯂꯕꯗꯤ, ꯀꯥꯔꯗꯁꯤꯡꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯔꯤꯕꯥ ꯄꯦꯅꯦꯂꯁꯤꯡ, ꯋꯦꯂꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯊꯝꯕꯤꯕꯁꯤꯡꯒꯤ ꯃꯍꯨꯠ ꯁꯤꯜꯂꯤ꯫ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯗꯨꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯁꯤ ꯀꯥꯔꯗꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯣꯏꯅꯥ ꯐꯪꯏ꯫

ꯈꯨꯗꯝ

ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤ ꯌꯥꯔꯤꯕꯃꯈꯩ ꯃꯥꯔꯀꯑꯥꯞ ꯑꯃꯁꯨꯡ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯌꯥꯝꯅꯥ ꯅꯦꯝꯅꯥ ꯁꯥꯕꯅꯤ, ꯑꯗꯨꯕꯨ ꯍꯧꯖꯤꯀꯁꯨ ꯀꯟꯠꯔꯣꯜ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯇꯟ ꯑꯃꯥ ꯄꯤꯕꯥ ꯉꯃꯍꯜꯂꯤ꯫ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯕꯥ, ꯃꯈꯣꯌꯅꯥ ꯐꯖꯅꯥ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ ꯑꯃꯁꯨꯡ ꯑꯇꯣꯞꯄꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯥ ꯌꯥꯝꯅꯥ ꯐꯖꯅꯥ ꯃꯤꯛꯁ ꯇꯧꯏ꯫ ꯃꯈꯣꯌꯗꯥ marginꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯩꯇꯦ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯃꯈꯥꯗꯥ ꯃꯤꯛꯁ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯂꯩꯕꯥ ꯕꯦꯁꯤꯛ ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ꯫ ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤ ꯍꯧꯗꯣꯛꯅꯕꯥ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯂꯩꯇꯦ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌꯅꯥ ꯃꯍꯧꯁꯥꯅꯥ ꯃꯁꯤꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯄꯨꯡꯐꯥꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯗꯨ ꯃꯄꯨꯡ ꯐꯥꯍꯅꯒꯅꯤ꯫ ꯃꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯁꯥꯏꯖꯒꯤ ꯑꯣꯄꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯖꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯏ .

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ꯀꯟꯇꯦꯟꯇ ꯃꯈꯂꯁꯤꯡ꯫

ꯀꯥꯔꯗꯁꯤꯡꯅꯥ ꯏꯃꯦꯖꯁꯤꯡ, ꯇꯦꯛꯁꯠ, ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡ, ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯃꯈꯜ ꯀꯌꯥꯒꯤ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ ꯃꯈꯥꯗꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤꯕꯥ ꯑꯗꯨꯒꯤ ꯈꯨꯗꯃꯁꯤꯡ ꯄꯤꯔꯤ꯫

ꯍꯛꯆꯥꯡ

ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯕꯤꯜꯗꯤꯡ ꯕ꯭ꯂꯣꯛ ꯑꯁꯤ .card-body. ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯄꯦꯗ ꯇꯧꯔꯕꯥ ꯁꯦꯛꯁꯟ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯇꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯃꯁꯤ ꯀꯥꯔꯗꯀꯤ ꯕꯣꯗꯤ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯅꯤ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯁꯤꯡ ꯑꯁꯤ ꯇꯦꯒ .card-titleꯑꯃꯗꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯃꯇꯧ ꯑꯁꯨꯝꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯍꯥꯄꯆꯤꯜꯂꯤ ꯑꯃꯁꯨꯡ ꯇꯦꯒ ꯑꯃꯗꯥ <h*>ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯑꯃꯒꯥ ꯑꯃꯒꯥ ꯃꯅꯥꯛꯇꯥ ꯊꯝꯃꯤ꯫.card-link<a>

ꯁꯕꯇꯥꯏꯇꯂꯁꯤꯡ ꯑꯁꯤ ꯇꯦꯒ .card-subtitleꯑꯃꯗꯥ a ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ <h*>ꯀꯔꯤꯒꯨꯝꯕꯥ .card-titleꯑꯃꯁꯨꯡ .card-subtitleꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯗꯨ .card-bodyꯑꯥꯏꯇꯦꯝ ꯑꯃꯗꯥ ꯊꯝꯂꯕꯗꯤ, ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯁꯕꯇꯥꯏꯇꯜ ꯑꯗꯨ ꯐꯖꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯏ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫
ꯀꯥꯔꯗꯀꯤ ꯁꯕꯇꯥꯏꯇꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯀꯥꯔꯗ ꯂꯤꯉ꯭ꯛ ꯑꯇꯣꯞꯄꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯅꯤ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

ꯏꯃꯦꯖꯁꯤꯡ꯫

.card-img-topꯀꯥꯔꯗꯀꯤ ꯃꯊꯛꯇꯥ ꯏꯃꯦꯖ ꯑꯃꯥ ꯊꯝꯃꯤ꯫ , .card-textꯀꯥꯔꯗꯇꯥ ꯇꯦꯛꯁꯠ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ꯫ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯛꯁꯠ .card-textꯑꯁꯤ ꯁ꯭ꯇꯦꯟꯗꯔꯗ HTML ꯇꯦꯒꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯁꯨ ꯌꯥꯏ꯫

Placeholder Image cap

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯂꯤꯁ꯭ꯠ ꯇꯧꯕꯥ꯫

ꯐ꯭ꯂꯁ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯥꯔꯗ ꯑꯃꯗꯥ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯂꯤꯁ꯭ꯇꯁꯤꯡ ꯁꯦꯝꯃꯨ꯫

  • ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
  • ꯑꯅꯤꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
  • ꯑꯍꯨꯃꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
ꯐꯤꯆꯔ ꯇꯧꯔꯕꯥ꯫
  • ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
  • ꯑꯅꯤꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
  • ꯑꯍꯨꯃꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
  • ꯑꯅꯤꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
  • ꯑꯍꯨꯃꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

ꯀꯤꯆꯦꯟ ꯁꯤꯉ꯭ꯛ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯔꯤꯕꯥ ꯀꯥꯔꯗ ꯑꯗꯨ ꯁꯦꯝꯅꯕꯥ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯃꯈꯂꯁꯤꯡ ꯃꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯃꯦꯆ ꯇꯧ, ꯅꯠꯠꯔꯒꯥ ꯃꯐꯃꯗꯨꯗꯥ ꯄꯨꯝꯅꯃꯛ ꯊꯥꯗꯣꯀꯎ꯫ ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯑꯁꯤ ꯏꯃꯦꯖ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ, ꯕ꯭ꯂꯣꯀꯁꯤꯡ, ꯇꯦꯛꯁꯠ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯃꯥꯅꯤ—ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯐꯤꯛꯁ-ꯋꯥꯏꯗ ꯀꯥꯔꯗ ꯑꯃꯗꯥ ꯀꯨꯄꯁꯤꯜꯂꯤ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

  • ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
  • ꯑꯅꯤꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
  • ꯑꯍꯨꯃꯁꯨꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯍꯦꯗ ꯑꯃꯁꯨꯡ/ꯅꯠꯠꯔꯒꯥ ꯐꯨꯇꯔ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫

ꯐꯤꯆꯔ ꯇꯧꯔꯕꯥ꯫
ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card-headerꯀꯥꯔꯗ ꯍꯦꯗꯁꯤꯡ ꯑꯁꯤ <h*>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

ꯐꯤꯆꯔ ꯇꯧꯔꯕꯥ꯫
ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ꯄꯟꯕ

ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯣꯠ ꯑꯃꯥ, ꯕ꯭ꯂꯣꯀꯀꯣꯠ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯌꯥꯑꯣꯕꯥ꯫

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
ꯐꯤꯆꯔ ꯇꯧꯔꯕꯥ꯫
ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

ꯁꯥꯏꯖ ꯇꯧꯕꯥ꯫

ꯀꯥꯔꯗꯁꯤꯡꯅꯥ widthꯍꯧꯗꯣꯛꯅꯕꯒꯤꯗꯃꯛ ꯑꯀꯛꯅꯕꯥ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ ꯍꯥꯌꯅꯥ ꯂꯧꯗꯦ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯑꯇꯣꯞꯄꯥ ꯃꯑꯣꯡ ꯑꯃꯗꯥ ꯍꯥꯌꯗ꯭ꯔꯕꯗꯤ 100% ꯄꯥꯀꯄꯥ ꯑꯣꯏꯒꯅꯤ꯫ ꯃꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ., ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ, ꯒ꯭ꯔꯤꯗ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ꯫

ꯒ꯭ꯔꯤꯗ ꯃꯥꯔꯀꯑꯥꯞ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

ꯒ꯭ꯔꯤꯗ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ, ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯀꯥꯔꯗꯁꯤꯡ ꯑꯗꯨ ꯀꯣꯂꯝ ꯑꯃꯁꯨꯡ ꯔꯣꯁꯤꯡꯗꯥ ꯀꯨꯄꯁꯤꯜꯂꯨ꯫

ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ꯫

ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯑꯗꯨ ꯊꯨꯅꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯂꯩꯔꯤꯕꯥ ꯁꯥꯏꯖꯤꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯀꯨꯗꯥꯝ
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯀꯨꯗꯥꯝ
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯅꯍꯥꯛꯀꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯇꯁꯤꯡꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯏꯅꯂꯥꯏꯟ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯣꯏꯅꯥ ꯀꯁ꯭ꯇꯝ CSS ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ꯇꯦꯛꯁꯠ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯀꯥꯔꯗ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯇꯦꯛꯁꯠ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯑꯗꯨ ꯅꯍꯥꯛꯅꯥ ꯊꯨꯅꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ—ꯃꯗꯨꯒꯤ ꯃꯄꯨꯡꯐꯥꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯀꯛꯅꯕꯥ ꯁꯔꯨꯀꯁꯤꯡꯗꯥ—ꯑꯩꯈꯣꯌꯒꯤ ꯇꯦꯛꯁꯠ ꯑꯦꯂꯥꯏꯟ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ .

ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯅꯦꯚ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯍꯦꯗ (ꯅꯠꯠꯔꯒꯥ ꯕ꯭ꯂꯣꯛ)ꯗꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯈꯔꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ .

ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠ���ꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ꯏꯃꯦꯖꯁꯤꯡ꯫

ꯀꯥꯔꯗꯁꯤꯡꯗꯥ ꯏꯃꯦꯖꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯒꯤ ꯑꯣꯄꯁꯟ ꯈꯔꯥ ꯌꯥꯎꯏ꯫ ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯃꯊꯛ ꯑꯃꯍꯦꯛꯇꯗꯥ “ꯏꯃꯦꯖ ꯀꯦꯄꯁꯤꯡ” ꯑꯦꯄꯦꯟꯗꯤꯡ ꯇꯧꯕꯥ, ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯑꯣꯚꯔꯂꯦꯏ ꯇꯧꯕꯥ, ꯅꯠꯠꯔꯒꯥ ꯀꯥꯔꯗ ꯑꯃꯗꯥ ꯏꯃꯦꯖ ꯑꯗꯨ ꯁꯨꯞꯅꯒꯤ ꯑꯦꯝꯕꯦꯗ ꯇꯧꯕꯥ ꯍꯥꯌꯕꯁꯤꯗꯒꯤ ꯈꯜꯂꯨ꯫

ꯏꯃꯦꯖ ꯀꯦꯄꯁꯤꯡ꯫

ꯍꯦꯗ ꯑꯃꯁꯨꯡ ꯐꯨꯇꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯅꯥ, ꯀꯥꯔꯗꯁꯤꯡꯗꯥ ꯃꯊꯛ ꯑꯃꯁꯨꯡ ꯃꯈꯥꯒꯤ “ꯏꯃꯦꯖ ꯀꯦꯞ” ꯌꯥꯎꯕꯥ ꯌꯥꯏ—ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯃꯊꯛꯇꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯏꯃꯦꯖꯁꯤꯡ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

ꯑꯔꯣꯏꯕꯥ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯈꯤꯕꯥ ꯳ ꯃꯤꯅꯤꯠꯀꯤ ꯃꯃꯥꯡꯗꯥ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

ꯑꯔꯣꯏꯕꯥ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯈꯤꯕꯥ ꯳ ꯃꯤꯅꯤꯠꯀꯤ ꯃꯃꯥꯡꯗꯥ꯫

Placeholder Image cap
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

ꯏꯃꯦꯖ ꯑꯣꯚꯔꯂꯦꯏꯁꯤꯡ꯫

ꯏꯃꯦꯖ ꯑꯃꯥ ꯀꯥꯔꯗꯀꯤ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯑꯃꯗꯥ ꯑꯣꯟꯊꯣꯀꯎ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯀꯥꯔꯗꯀꯤ ꯇꯦꯛꯁꯠ ꯑꯗꯨ ꯑꯣꯚꯔꯂꯦꯏ ꯇꯧ꯫ ꯏꯃꯦꯖ ꯑꯗꯨꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯊꯧ ꯇꯥꯗꯕꯥ ꯌꯥꯏ꯫

Placeholder Card image
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

ꯑꯔꯣꯏꯕꯥ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯈꯤꯕꯥ ꯳ ꯃꯤꯅꯤꯠꯀꯤ ꯃꯃꯥꯡꯗꯥ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯏꯃꯦꯖ ꯑꯗꯨꯒꯤ ꯑꯋꯥꯡꯕꯥ ꯑꯗꯨꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯆꯥꯎꯕꯥ ꯑꯣꯏꯔꯣꯏꯗꯕꯅꯤ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯏꯃꯦꯖ ꯑꯗꯨꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯆꯥꯎꯔꯕꯗꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯏꯃꯦꯖ ꯑꯗꯨꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯎꯠꯀꯅꯤ꯫

ꯑꯐꯩꯕ

ꯒ꯭ꯔꯤꯗ ꯑꯃꯁꯨꯡ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯀꯝꯕꯤꯅꯦꯁꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤ ꯃꯣꯕꯥꯏꯜ ꯐ꯭ꯔꯦꯟꯗꯂꯤ ꯑꯃꯁꯨꯡ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯒ꯭ꯔꯤꯗ ꯒꯇꯔꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯧꯊꯣꯀꯏ .g-0ꯑꯃꯁꯨꯡ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯥ .col-md-*ꯀꯥꯔꯗ ꯑꯗꯨ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯍꯟꯅꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫ mdꯅꯍꯥꯛꯀꯤ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯃꯈꯥ ꯇꯥꯕꯥ ꯑꯦꯗꯖꯁ꯭ꯇꯃꯦꯟꯇꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫

Placeholder Image
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

ꯑꯔꯣꯏꯕꯥ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯈꯤꯕꯥ ꯳ ꯃꯤꯅꯤꯠꯀꯤ ꯃꯃꯥꯡꯗꯥ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

ꯀꯥꯔꯗꯀꯤ ꯃꯑꯣꯡꯁꯤꯡ꯫

ꯀꯥꯔꯗꯁꯤꯡꯗꯥ ꯃꯈꯣꯌꯒꯤ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗꯁꯤꯡ, ꯕꯣꯔꯗꯔꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯃꯆꯨ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯗꯣꯛ-ꯁꯦꯃꯖꯤꯟ ꯇꯧꯅꯕꯒꯤ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯌꯥꯎꯏ꯫

ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯑꯃꯁꯨꯡ ꯃꯆꯨ꯫

v5.2.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯃꯇꯦꯡ ꯄꯥꯡꯕꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ background-colorꯀꯟꯠꯔꯁ꯭ꯇꯤꯡ ꯐꯣꯔꯒ꯭ꯔꯥꯎꯟꯗ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯕꯤꯌꯨ . ꯃꯃꯥꯡꯗꯥ ꯃꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯈꯅꯒꯗꯕꯥ ꯑꯃꯁꯨꯡ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯄꯦꯌꯥꯔ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯔꯝꯃꯤ, ꯃꯗꯨ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫color.text-bg-{color}.text-{color}.bg-{color}

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯁꯦꯀꯦꯟꯗꯔꯤ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯃꯥꯌ ꯄꯥꯀꯄꯥ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯈꯨꯗꯣꯡꯊꯤꯕꯥ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯋꯥꯔꯅꯤꯡ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯏꯅꯐꯣ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯂꯥꯏꯠ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯗꯥꯔꯛ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫

ꯑꯔꯊ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯃꯆꯨ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯄꯤꯔꯤ, ꯃꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯌꯧꯍꯅꯕꯥ ꯉꯝꯂꯣꯏ꯫ .visually-hiddenꯃꯆꯨ ꯑꯗꯨꯅꯥ ꯇꯥꯀꯄꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯗꯨ ꯀꯟꯇꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯒꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨꯗꯒꯤ) ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯎꯕꯥ ꯐꯪꯏ ꯍꯥꯌꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯗꯣꯀꯎ, ꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯛꯁꯇꯒꯨꯝꯕꯥ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯄꯥꯝꯕꯩꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯥꯎꯍꯅꯕꯥ꯫

ꯉꯝꯈꯩ

ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯁꯨꯞꯅꯒꯤ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯉꯃꯈꯩꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯃꯥ-ꯃꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯁꯕꯁꯦꯠ ꯑꯃꯗꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯊꯝꯕꯥ border-colorꯌꯥꯏ ꯍꯥꯌꯕꯁꯤ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫.text-{color}.card

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯁꯦꯀꯦꯟꯗꯔꯤ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯃꯥꯌ ꯄꯥꯀꯄꯥ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯈꯨꯗꯣꯡꯊꯤꯕꯥ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯋꯥꯔꯅꯤꯡ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯏꯅꯐꯣ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯂꯥꯏꯠ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯗꯥꯔꯛ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ꯃꯤꯛꯁꯅꯁꯤꯡꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ꯫

ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯥꯔꯗ ꯍꯦꯗ ꯑꯃꯁꯨꯡ ꯐꯨꯇꯔꯗꯥ ꯂꯩꯕꯥ ꯉꯃꯈꯩꯁꯤꯡꯁꯨ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ, ꯑꯃꯁꯨꯡ background-colorꯃꯈꯣꯌꯒꯤ .bg-transparent.

ꯍꯦꯗ ꯇꯧꯕꯥ꯫
ꯃꯥꯌ ꯄꯥꯀꯄꯥ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

ꯀꯥꯔꯗ ꯂꯦꯑꯥꯎꯠ ꯇꯧꯕꯥ꯫

ꯀꯥꯔꯗꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯇꯥ ꯅꯠꯇꯅꯥ, ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯀꯥꯔꯗꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖꯁꯤꯡ ꯂꯦꯄꯊꯣꯛꯅꯕꯒꯤ ꯑꯣꯄꯁꯟ ꯈꯔꯥ ꯌꯥꯎꯏ꯫ ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯗꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯗ꯭ꯔꯤ .

ꯀꯥꯔꯗ ꯒ꯭ꯔꯨꯄꯁꯤꯡ꯫

ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯋꯥꯡꯕꯥ ꯀꯂꯃꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯇꯦꯆ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯈꯛꯇꯃꯛ ꯑꯣꯏꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯅꯕꯥ ꯀꯥꯔꯗ ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯀꯥꯔꯗ ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯇꯦꯛ ꯇꯧꯗꯨꯅꯥ ꯍꯧꯏ ꯑꯃꯁꯨꯡ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯒꯤ display: flex;ꯍꯧꯔꯒꯥ ꯌꯨꯅꯤꯐꯣꯔꯝ ꯗꯥꯏꯃꯦꯟꯁꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯇꯦꯆ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫sm

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

ꯑꯔꯣꯏꯕꯥ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯈꯤꯕꯥ ꯳ ꯃꯤꯅꯤꯠꯀꯤ ꯃꯃꯥꯡꯗꯥ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗ ꯑꯁꯤꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯑꯃꯥ ꯂꯩ꯫

ꯑꯔꯣꯏꯕꯥ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯈꯤꯕꯥ ꯳ ꯃꯤꯅꯤꯠꯀꯤ ꯃꯃꯥꯡꯗꯥ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯀꯥꯔꯗ ꯑꯁꯤꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯍꯥꯏꯠ ꯑꯦꯛꯁꯟ ꯑꯗꯨ ꯎꯠꯅꯕꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯗꯨꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯂꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯂꯩ꯫

ꯑꯔꯣꯏꯕꯥ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯈꯤꯕꯥ ꯳ ꯃꯤꯅꯤꯠꯀꯤ ꯃꯃꯥꯡꯗꯥ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

ꯐꯨꯇꯔꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯕꯥ ꯀꯥꯔꯗ ꯒ꯭ꯔꯨꯄꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ, ꯃꯈꯣꯌꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯑꯣꯇꯣꯃꯦꯇꯦꯗ ꯑꯣꯏꯅꯥ ꯂꯥꯏꯟ ꯇꯧꯒꯅꯤ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗ ꯑꯁꯤꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯑꯃꯥ ꯂꯩ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯀꯥꯔꯗ ꯑꯁꯤꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯍꯥꯏꯠ ꯑꯦꯛꯁꯟ ꯑꯗꯨ ꯎꯠꯅꯕꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯗꯨꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯂꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯂꯩ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

ꯒ꯭ꯔꯤꯗ ꯀꯥꯔꯗꯁꯤꯡ꯫

ꯔꯣ ꯑꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯌꯥꯝ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯝ (ꯅꯍꯥꯛꯀꯤ ꯀꯥꯔꯗꯁꯤꯡꯒꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯀꯨꯄꯁꯤꯜꯂꯕꯥ) ꯎꯠꯂꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯒꯤ .row-colsꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯃꯐꯃꯁꯤꯗꯥ .row-cols-1ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤ ꯀꯣꯂꯝ ꯑꯃꯗꯥ ꯊꯝꯂꯤ, ꯑꯃꯁꯨꯡ .row-cols-md-2ꯀꯥꯔꯗ ꯃꯔꯤ ꯑꯁꯤ ꯃꯁꯤꯡ ꯌꯥꯝꯂꯕꯥ ꯔꯣꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯗꯥ ꯈꯥꯌꯗꯣꯀꯏ, ꯃꯦꯗꯤꯌꯝ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯒꯤ ꯍꯧꯔꯒꯥ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ꯃꯁꯤ ꯍꯣꯡꯗꯣꯀꯎ .row-cols-3ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯃꯔꯤꯁꯨꯕꯥ ꯀꯥꯔꯗ ꯔꯦꯞ ꯑꯗꯨ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ꯅꯍꯥꯛꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯑꯋꯥꯡꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯇꯃꯗꯥ, .h-100ꯀꯥꯔꯗꯁꯤꯡ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯃꯥꯟꯅꯕꯥ ꯍꯥꯏꯇꯁꯤꯡ ꯄꯥꯝꯂꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ $card-height: 100%ꯁꯥꯁꯇꯥ ꯁꯦꯠ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯁꯣꯔꯠ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ꯀꯥꯔꯗ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯅꯥ, ꯀꯥꯔꯗ ꯐꯨꯇꯔꯁꯤꯡ ꯑꯁꯤ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯂꯥꯏꯟ ꯇꯧꯒꯅꯤ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯈꯔꯥ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯏ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯀꯥꯔꯗ ꯑꯁꯤꯅꯥ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯑꯃꯥ ꯂꯩ꯫

Placeholder Image cap
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

ꯃꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯂꯤꯗ-ꯏꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯄꯣꯔꯇꯤꯡ ꯇꯦꯛꯁꯠ ꯂꯩꯕꯥ ꯍꯦꯟꯅꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯥꯔꯗ ꯑꯃꯅꯤ꯫ ꯀꯥꯔꯗ ꯑꯁꯤꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯍꯥꯏꯠ ꯑ���ꯛꯁꯟ ꯑꯗꯨ ꯎꯠꯅꯕꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯗꯨꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯁꯥꯡꯂꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯂꯩ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

ꯃꯦꯁꯅꯔꯤ ꯇꯧꯕꯥ꯫

ꯏꯟ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯦꯁꯅꯔꯤꯒꯨꯝꯕꯥv4 ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯑꯗꯨ ꯌꯦꯡꯁꯤꯟꯅꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯈꯛꯇꯒꯤ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯅꯤꯛ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯈꯤ , ꯑꯗꯨꯕꯨ ꯇꯦꯛꯅꯤꯛ ꯑꯁꯤꯅꯥ ꯅꯨꯡꯉꯥꯏꯇꯕꯥ ꯁꯥꯏꯗ ꯏꯐꯦꯛꯇ ꯀꯌꯥꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯈꯤ . ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯂꯦꯑꯥꯎꯠ ꯃꯈꯜ ꯑꯁꯤ , ꯗꯥ ꯂꯩꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ , ꯅꯍꯥꯛꯅꯥ ꯃꯦꯁꯅꯔꯤ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤ ꯈꯛꯇꯃꯛ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫ ꯃꯦꯁꯅꯔꯤ ꯑꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯌꯥꯑꯣꯗꯦ , ꯑꯗꯨꯕꯨ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯗꯣꯃꯗꯥ ꯍꯧꯗꯣꯀꯄꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯗꯦꯃꯣ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯦ꯫v5

ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

v5.2.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯍꯦꯅꯒꯠꯂꯛꯂꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯑꯦꯞꯔꯣꯆꯀꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ, ꯀꯥꯔꯗꯁꯤꯡꯅꯥ ꯍꯧꯖꯤꯛꯇꯤ ꯂꯣꯀꯦꯜ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ .card. CSS ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯁꯥꯁ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤ, ꯃꯁꯤꯁꯨ꯫

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};
  

ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;