Skip to main content

Cards

Upgency cards provide a flexible and extensible content container with multiple variants and options.

Card Blogs

Card for make blog grid layout.

avatar

Great Layout and Grid

04 May 2020

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.


            
              <!-- Card -->
              <div class="card blog-two border-0 mb-4 mb-lg-0 rounded overflow-hidden shadow-sm">
                <div class="blog-two-img">
                  <a href="#">
                    <img class="img-fluid" src="assets/img-min/blog/blog_3.jpg" alt="alt title">
                  </a>
                </div>
                <div class="card-body">
                  <span class="blog-author">
                    <a href="#"><img class="avatar-md mt-n-2 rounded-circle" src="assets/img-min/avatar/img3-small.jpg" alt="avatar"></a>
                  </span>
                  <div class="card-title">
                    <h3 class="h5 mb-3"><a href="#">Great Layout and Grid</a></h3>
                    <div class="text-muted">
                      <svg class="bi bi-calendar me-2 text-muted" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
                        <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                      </svg><span>04 May 2020</span>
                    </div>
                  </div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
                </div>
              </div><!-- End card -->

              <!-- Card -->
              <div class="card blog-one border-0 mb-4 mb-lg-0 rounded overflow-hidden shadow-sm">
                <div class="blog-one-img">
                  <a href="#">
                    <img class="img-fluid" src="assets/img-min/blog/blog_2.jpg" alt="">
                  </a>
                  <div class="blog-one-category p-2 bg-primary">
                    <a class="text-white font-size-75" href="#">Creative</a>
                  </div>
                </div>
                <div class="card-body">
                  <div class="card-title">
                    <h3 class="h5 mb-3"><a href="#">New UI Design for 2020</a></h3>
                    <div class="text-muted">
                      <svg class="bi bi-calendar me-2 text-muted" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
                        <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                      </svg><span>04 May 2020</span>
                    </div>
                  </div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
                </div>
              </div><!-- end card -->
            
          

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque.


            
              <!-- Card -->
              <div class="card blog-three rounded overflow-hidden border-0 mb-4 mb-lg-0">
                <div class="blog-three-img">
                  <a href="#">
                    <img class="img-fluid" src="assets/img-min/blog/blog_3.jpg" alt="">
                  </a>
                  <div class="post-date bg-light p-2">
                    <span class="date">12</span>
                    <span class="small">May</span>
                  </div>
                </div>
                <div class="card-body px-0">
                  <div class="card-title">
                    <h3 class="h5 mb-3"><a href="#">New UI Design for 2020</a></h3>
                  </div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque.</p>
                </div>
              </div><!-- end card -->

              <!-- Card -->
              <div class="card blog-two mb-4 mb-lg-0 border-0 rounded overflow-hidden hover-shadow-sm z-index-1">
                 <div class="z-index-n1">
                    <a href="#">
                      <img class="img-fluid" src="src/img-min/blog/blog_2.jpg" alt="">
                    </a>
                 </div>
                 <div class="card-body bg-white text-center mx-4 mt-n6">
                    <div class="card-title">
                      <h3 class="h5 mb-3"><a href="#">New UI Design for 2020</a></h3>
                      <div class="text-muted">
                        <svg class="bi bi-calendar me-2 text-muted" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
                          <path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                        </svg><span>04 May 2020</span>
                      </div>
                    </div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in pulvinar neque.</p>
                 </div>
              </div><!-- end card -->
            
          

You can read full documentation about card in Bootstrap Documentation