HTML Block with Multiple Buttons on Tabs

Introduction

This module was originally designed by TDX.

Screenshot

Uploaded Image (Thumbnail)

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:

  1. Click the Source button in the top-left of the WYSIWYG editor
  2. Paste the code from below
  3. Update links or images to match your environment references
  4. 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
  5. 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>

Print Article

Attachments (0)

No attachments found.