Introduction
This module was originally designed by TDX.
Screenshot
![Click to View Full Image Uploaded Image (Thumbnail)](https://solutions.teamdynamix.com/TDPortal/Images/Viewer?fileName=232ee60f-340f-48bc-9bea-f941605c56ba-thumb.jpg&beidInt=91)
Module Settings
- Show Border: checked/unchecked as desired
- Show Name: checked/unchecked as desired
- Sanitize Content: checked
- Layout Notes:
- Block will dynamically shift to larger/smaller based upon the number of buttons on a tab
- Works very well in Desktop modules as well for more dynamic desktops and quick resources at hand
Module Code
To use the code in the box below, when creating a new module:
- Click the Source button in the top-left of the WYSIWYG editor
- Paste the code from below
- Update links or images to match your environment references
- Click the Source button again to see a preview of the content
Note: some styling may not display until the module is viewed in the client portal
- Save the module
<ul class="nav nav-tabs">
<li class="active"><a aria-expanded="true" data-toggle="tab" href="div.home">Home</a></li>
<li><a aria-expanded="false" data-toggle="tab" href="div.specific">Specific</a></li>
<li><a aria-expanded="false" data-toggle="tab" href="div.alt">Alt Tab</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade home active in">
<div class="row" style="width: 100%">
<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Home L1</a><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Home L2</a></div>
<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Home R1</a><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Home R2</a></div>
</div>
</div>
<div class="tab-pane fade specific">
<div class="row" style="width: 100%">
<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Specific L1</a><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Specific L2</a></div>
<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Specific R1</a><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Specific R2</a></div>
</div>
</div>
<div class="tab-pane fade alt">
<div class="row" style="width: 100%">
<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Alt L1</a><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Alt L2</a></div>
<div class="col-md-6" style="padding: 5px;"><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Alt R1</a><a class="btn btn-primary btn-block mb-2" href="URL HERE" style="background-color: #2c71b9;" target="_blank">Alt R2</a></div>
</div>
</div>
</div>