Source

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

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

ꯃꯔꯝꯗꯤ

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

ꯈꯨꯗꯝ

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

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

ꯀꯥꯔꯗ ꯏꯃꯦꯖ ꯀꯦꯞ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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. ꯀꯥꯔꯗ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯄꯦꯗ ꯇꯧꯔꯕꯥ ꯁꯦꯛꯁꯟ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯇꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯃꯁꯤ ꯀꯥꯔꯗꯀꯤ ꯕꯣꯗꯤ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯅꯤ꯫
<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ꯑꯥꯏꯇꯦꯝ ꯑꯃꯗꯥ ꯊꯝꯂꯕꯗꯤ, ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ ꯑꯃꯁꯨꯡ ꯁꯕꯇꯥꯏꯇꯜ ꯑꯗꯨ ꯐꯖꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯏ꯫

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

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

ꯀꯥꯔꯗ ꯂꯤꯉ꯭ꯛ ꯑꯇꯣꯞꯄꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯅꯤ꯫
<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 ꯇꯦꯒꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯁꯨ ꯌꯥꯏ꯫

ꯀꯥꯔꯗ ��ꯃꯦꯖ ꯀꯦꯞ꯫

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

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

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

  • ꯀ꯭ꯔꯁ ꯖꯁ꯭ꯇꯣ ꯑꯣꯗꯤꯑꯣ꯫
  • ꯗꯥꯄꯤꯕꯁ ꯑꯦꯁꯤ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ ꯏꯟ
  • ꯏꯔꯣꯁꯇꯥ ꯂꯩꯕꯥ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
ꯐꯤꯆꯔ ꯇꯧꯔꯕꯥ꯫
  • ꯀ꯭ꯔꯁ ꯖꯁ꯭ꯇꯣ ꯑꯣꯗꯤꯑꯣ꯫
  • ꯗꯥꯄꯤꯕꯁ ꯑꯦꯁꯤ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ ꯏꯟ
  • ꯏꯔꯣꯁꯇꯥ ꯂꯩꯕꯥ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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

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

ꯀꯥꯔꯗ ꯏꯃꯦꯖ ꯀꯦꯞ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

  • ꯀ꯭ꯔꯁ ꯖꯁ꯭ꯇꯣ ꯑꯣꯗꯤꯑꯣ꯫
  • ꯗꯥꯄꯤꯕꯁ ꯑꯦꯁꯤ ꯐꯦꯁꯤꯂꯤꯁꯤꯁ ꯏꯟ
  • ꯏꯔꯣꯁꯇꯥ ꯂꯩꯕꯥ ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ꯫
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

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

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

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<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*>ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

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

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

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<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>
ꯄꯟꯕ

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯃꯥ ꯑꯦꯟꯇꯤ꯫

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ꯫
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
ꯐꯤꯆꯔ ꯇꯧꯔꯕꯥ꯫
ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

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

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<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% ꯄꯥꯀꯄꯥ ꯑꯣꯏꯒꯅꯤ꯫ ꯃꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯁ꯭ꯇꯝ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ., ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ, ꯒ꯭ꯔꯤꯗ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ꯫

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

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

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

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

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

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

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<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>

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

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

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

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

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

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

ꯀꯨꯗꯥꯝ
<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 ꯁꯤꯖꯤꯟꯅꯧ꯫

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

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

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<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" 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-right" 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">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <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" href="#">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>
ꯑꯈꯟꯅꯕꯥ ꯇꯥꯏꯇꯜ ꯇ꯭ꯔꯤꯠꯃꯦꯟꯇ꯫

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

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<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" href="#">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>

ꯏꯃꯦꯖꯁꯤꯡ꯫

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

ꯏꯃꯦꯖ ꯀꯦꯄꯁꯤꯡ꯫

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

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

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

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</div>

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

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

꯱꯰꯰%x꯲꯷꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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">Last updated 3 mins ago</p>
  </div>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="card text-white 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-white 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-white 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-white 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-white 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-white 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 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-white 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>
ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫

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

ꯉꯝꯈꯩ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 text-warning">
    <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 text-info">
    <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.

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

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

<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;ꯃꯈꯣꯌꯒꯤ ꯌꯨꯅꯤꯐꯣꯔꯝ ꯁꯥꯏꯖꯁꯤꯡ ꯑꯗꯨ ꯐꯪꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

ꯀꯥꯔꯗ ꯗꯦꯀꯁꯤꯡ꯫

ꯑꯃꯒꯥ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯗꯕꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯋꯥꯡꯕꯥ ꯀꯥꯔꯗꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯕ꯭ꯔꯥ? ꯀꯥꯔꯗ ꯗꯦꯀꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

꯱꯰꯰%x꯲꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

꯱꯰꯰%x꯲꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

꯱꯰꯰%x꯲꯰꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

꯱꯰꯰%x꯱꯸꯰ ꯑꯣꯏꯒꯅꯤ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

ꯀꯥꯔꯗꯀꯤ ꯀꯂꯃꯁꯤꯡ꯫

ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤ ꯁꯨꯞꯅꯇꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯦꯁꯅꯔꯤꯒꯨꯝꯕꯥ ꯀꯣꯂꯃꯁꯤꯡꯗꯥ ꯑꯣꯔꯒꯅꯥꯏꯖ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ.card-columns . ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤ columnꯍꯦꯟꯅꯥ ꯂꯥꯌꯅꯥ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯀꯤ ꯃꯍꯨꯠꯇꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤ ꯃꯊꯛꯇꯒꯤ ꯃꯈꯥ ꯐꯥꯑꯣꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯋꯥꯡꯕꯗꯒꯤ ꯑꯔꯣꯏꯕꯥ ꯐꯥꯑꯣꯕꯥ ꯑꯣꯔꯗꯔ ꯇꯧꯏ꯫

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ! ꯀꯥꯔꯗ ꯀꯂꯃꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯃꯥꯏꯜ ꯑꯗꯨ ꯈꯦꯠꯅꯕꯥ ꯌꯥꯏ꯫ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯀꯥꯔꯗꯁꯤꯡ ꯊꯨꯒꯥꯏꯕꯥ ꯊꯤꯡꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯕꯨꯂꯦꯠ ꯄ꯭ꯔꯨꯐ ꯁꯣꯂꯨꯁꯟ ꯑꯃꯥ ꯑꯣꯏꯗ꯭ꯔꯤ display: inline-blockꯍꯥꯌꯅꯥ ꯁꯦꯠ ꯇꯧꯒꯗꯕꯅꯤ꯫column-break-inside: avoid

꯱꯰꯰%x꯱꯶꯰ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫
ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯔꯦꯞ ꯇꯧꯕꯥ ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯃꯥ ꯑꯦꯟꯇꯤ꯫

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ꯫
꯱꯰꯰%x꯱꯶꯰ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯔꯦ ꯑꯦꯔꯥꯠ꯫

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

꯱꯰꯰%x꯲꯶꯰ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫

ꯂꯣꯔꯦꯝ ꯏꯄꯁꯝ ꯗꯣꯂꯣꯔ ꯁꯤꯠ ꯑꯦꯃꯦꯠ, ꯀꯟꯁꯦꯛꯇꯦꯇꯨꯔ ꯑꯦꯗꯤꯄꯤꯁꯤꯡ ꯏꯂꯤꯠ꯫ ꯏꯟꯇꯤꯖꯔ ꯄꯣꯁꯨꯔꯦ ꯑꯦꯔꯥꯠ ꯑꯃꯥ ꯑꯦꯟꯇꯤ꯫

ꯁꯣꯔꯁ ꯇꯥꯏꯇꯂꯗꯥ ꯃꯃꯤꯡ ꯂꯩꯔꯕꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ꯫
ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯦꯜ꯫

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

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

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <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 class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 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>

ꯀꯥꯔꯗ ꯀꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯀꯣꯗ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯡꯗꯣꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯁꯨ ꯌꯥꯏ꯫ ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ CSS ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀ꯭ꯂꯥꯁꯀꯤ ꯑꯦꯛꯁꯇꯦꯟꯁꯟ ꯑꯃꯅꯤ .card-columns—CSS ꯀꯂꯃꯁꯤꯡ— ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯇꯤꯌꯔꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ꯫

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}