Button Tiles

Note: The markup that can be copied to your clipboard from this page is utilizing the latest Bootstrap 5.2.2 library markup. If your project is currently using the previous Bootstrap 4.6.2 library, you must replace any "data-bs-" attribute with "data-". The "-bs" attribute addition applies to Boostrap 5.2.2 only so as to not collide with other Javascript frameworks that may also utilize "data" attributes.

Example: Button Tiles Default

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Copy

                                    
                                        <div class="btn-tiles">

                                        <!-- BUTTON TILE -->

                                        <div class="tile">

                                        <div class="tile-content">

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        <!-- BUTTON TILE -->

                                        <div class="tile">

                                        <div class="tile-content">

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        <!-- BUTTON TILE -->

                                        <div class="tile">

                                        <div class="tile-content">

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        <!-- BUTTON TILE -->

                                        <div class="tile">

                                        <div class="tile-content">

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>

Copy

                                    
                                        <!-- ACTIVE -->

                                        <div class="tile active">...</div>

                                        <!-- ACTIVE DISABLED -->

                                        <div class="tile active disabled">...</div>

                                        <!-- DISABLED -->

                                        <div class="tile disabled">...</div>

Example: Button Tiles with Info Button (Info Icon should open a Help Modal)

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Copy

                                    
                                        <div class="btn-tiles">

                                        <!-- BUTTON TILE -->

                                        <div class="tile">

                                        <div class="tile-content">

                                        <div class="tile-info">

                                        <a href="#" target="_self" data-bs-toggle="modal" data-bs-target="modalID">

                                        <i class="fa-solid fa-circle-info tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Info"></i>

                                        </a>

                                        </div>

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        <!-- BUTTON TILE -->

                                        <div class="tile">

                                        <div class="tile-content">

                                        <div class="tile-info">

                                        <a href="#" target="_self" data-bs-toggle="modal" data-bs-target="modalID">

                                        <i class="fa-solid fa-circle-info tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Info"></i>

                                        </a>

                                        </div>

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        <!-- BUTTON TILE -->

                                        <div class="tile">

                                        <div class="tile-content">

                                        <div class="tile-info">

                                        <a href="#" target="_self" data-bs-toggle="modal" data-bs-target="modalID">

                                        <i class="fa-solid fa-circle-info tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Info"></i>

                                        </a>

                                        </div>

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        <!-- BUTTON TILE -->

                                        <div class="tile">

                                        <div class="tile-content">

                                        <div class="tile-info">

                                        <a href="#" target="_self" data-bs-toggle="modal" data-bs-target="modalID">

                                        <i class="fa-solid fa-circle-info tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Info"></i>

                                        </a>

                                        </div>

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        <p>Text</p>

                                        </div>

                                        </div>

                                        </div>

Copy

                                    
                                        <!-- ACTIVE -->

                                        <div class="tile active">...</div>

                                        <!-- ACTIVE DISABLED -->

                                        <div class="tile active disabled">...</div>

                                        <!-- DISABLED -->

                                        <div class="tile disabled">...</div>

Example: Button Tiles w/ Image and Button

Lorem Ipsum

Copy

                                    
                                        <div class="btn-tiles">

                                        <!-- BUTTON TILE -->

                                        <div class="tile">

                                        <div class="tile-content">

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        </div>

                                        </div>

                                        <!-- BUTTON TILE -->

                                        <div class="tile active">

                                        <div class="tile-content">

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        </div>

                                        </div>

                                        <!-- BUTTON TILE -->

                                        <div class="tile active disabled">

                                        <div class="tile-content">

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        </div>

                                        </div>

                                        <!-- BUTTON TILE -->

                                        <div class="tile disabled">

                                        <div class="tile-content">

                                        <div class="tile-img">

                                        <img src="/images/am/file-name.svg" alt="Alt Text" border="0" />

                                        </div>

                                        <h6>Text</h6>

                                        </div>

                                        </div>

                                        </div>

Copy

                                    
                                        <!-- ACTIVE -->

                                        <div class="tile active">...</div>

                                        <!-- ACTIVE DISABLED -->

                                        <div class="tile active disabled">...</div>

                                        <!-- DISABLED -->

                                        <div class="tile disabled">...</div>

Example: Button Tiles w/ Justify Content Center

Lorem Ipsum

Copy

                                    
                                        <div class="btn-tiles justify-content-center">...</div>