Portal

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: Tiles Default
Alt Text
Lorem Ipsum

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

Button
Alt Text
Lorem Ipsum

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

Button
Alt Text
Lorem Ipsum

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

Button
Alt Text
Lorem Ipsum

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

Select
Copy 
                                    
                                        <div class="tiles">

                                        <!-- TILE 01 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </div>

                                        </div>

                                        <!-- TILE 02 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </div>

                                        </div>

                                        <!-- TILE 03 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </div>

                                        </div>

                                        <!-- TILE 04 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </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: Tiles with Info (Info Icon should open a Help Modal)
Alt Text
Lorem Ipsum

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

Button
Alt Text
Lorem Ipsum

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

Button
Alt Text
Lorem Ipsum

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

Button
Alt Text
Lorem Ipsum

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

Select
Copy 
                                    
                                        <div class="tiles">

                                        <!-- TILE 01 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </div>

                                        </div>

                                        <!-- TILE 02 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </div>

                                        </div>

                                        <!-- TILE 03 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </div>

                                        </div>

                                        <!-- TILE 04 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </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: Tiles w/ Image and Button
Alt Text
Lorem Ipsum
Button
Alt Text
Lorem Ipsum
Button
Alt Text
Lorem Ipsum
Button
Alt Text
Lorem Ipsum
Select
Copy 
                                    
                                        <div class="tiles">

                                        <!-- TILE 01 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </div>

                                        </div>

                                        <!-- TILE 02 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </div>

                                        </div>

                                        <!-- TILE 03 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </div>

                                        </div>

                                        <!-- TILE 04 -->

                                        <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 class="tile-btn">

                                        <a href="#" target="_self" class="btn btn-primary">Button Label</a>

                                        </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: Tiles w/ Justify Content Center
Alt Text
Lorem Ipsum
Button
Alt Text
Lorem Ipsum
Button
Alt Text
Lorem Ipsum
Button
Alt Text
Lorem Ipsum
Button
Copy 
                                    
                                        <div class="tiles justify-content-center">...</div>


© Interactive Brokers LLC