섹션 개요

    • Single Card

      Card image cap

       Card title

      Some quick example text to build on the card title and make up the bulk of the card's content.

      Go somewhere
    • ソースを表示する

      <div class="card" style="width: 400px;">
        <img class="card-img-top" src="https://3rdwavemedia.com/demo-images/slides/maker-card-1.jpg" alt="Card image cap" />
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <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 Decks

      Card image cap
      Card title

      This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

      Last updated 3 mins ago

      Card image cap
      Card title

      This card has supporting text below as a natural lead-in to additional content.

      Last updated 3 mins ago

      Card image cap
      Card title

      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.

      Last updated 3 mins ago

    • ソースを表示する

      <div class="card-deck">
        <div class="card">
          <img class="card-img-top" src="https://3rdwavemedia.com/demo-images/slides/maker-card-0.jpg" 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="https://3rdwavemedia.com/demo-images/slides/maker-card-2.jpg" 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="https://3rdwavemedia.com/demo-images/slides/maker-card-3.jpg" 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>

    • Tip: You can change image size (eg .<img src="https://3rdwavemedia.com/demo-images/slides/maker-card-0.jpg" alt="Card image cap" width="200" height="113" class="img-fluid atto_image_button_text-bottom">).