Three-Column Module with Styling, Buttons, and Links (Western University of Health Sciences)

Introduction

A three-column layout of information, including quick link buttons, a pre-set list of services, and a pre-set list of knowledge base articles.  The formatting allows for incorporating key organization colors at the top of each column element, and includes shadow background styling behind the column elements.

This module was originally designed by Western University of Health Sciences.

Screenshot

Image showing three columns of information: Quick Links includes buttons for key areas of the TDX tool, Request Service shows top services with icons, Knowledge Base shows a bulleted list of hyperlinked articles

Module Settings

  • Show Border: unchecked
  • Show Name: unchecked
  • Sanitize Content: checked
  • Layout Notes: This module works best in a 100% page layout, or in a column that spans the full width of the page

Module Code

To use this code, when creating a new module:

  1. Click the Source button in the top-left of the WYSIWYG editor
  2. Paste the code, and be sure to update links or images to match your environment references
  3. 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
  4. Save the module

<div class="col-md-4 ui-sortable" id="Column2">
<div class="desktop-module panel panel-default no-border" id="4644185">
<div class="ModuleContent">
<div style="overflow: hidden;">
<div class="section" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-boxshadow="" style="border-color: rgb(134, 38, 51) rgb(193, 193, 193) rgb(193, 193, 193); border-style: solid; border-width: 10px 1px 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 20px; padding: 0px 15px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px; margin: 15px; --darkreader-inline-border-right:#42474a; --darkreader-inline-border-bottom:#42474a; --darkreader-inline-border-left:#42474a; --darkreader-inline-boxshadow:rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px; --darkreader-inline-border-top:#9e2d3c;">
<div class="row" data-darkreader-inline-border-bottom="" style="font-size: 2em; line-height: 70px; border-bottom: 1px solid; --darkreader-inline-border-bottom: currentcolor;">
<div class="col-6 col-md-2"><img src="https://stagewp.westernu.edu/mediafiles/teamdynamix/gears.png" style="width: 46px;  margin: 0px 10px 10px 0px;" /></div>

<div class="col-12 col-md-10">Quick Links</div>
</div>

<div data-darkreader-inline-bgcolor="" style="background-color: rgb(134, 38, 51); display: block; text-align: center; width: 100%; padding: 15px; margin: 15px 0px; font-size: 18px; border-radius: 5px; --darkreader-inline-bgcolor:#6b1e29;"><a data-darkreader-inline-color="" href="https://status.westernu.edu/" style="color: rgb(255, 255, 255); --darkreader-inline-color:#e8e6e3;" target="_blank">status.westernu.edu</a></div>

<div data-darkreader-inline-bgcolor="" style="background-color: rgb(134, 38, 51); display: block; text-align: center; width: 100%; padding: 15px; margin: 15px 0px; font-size: 18px; border-radius: 5px; --darkreader-inline-bgcolor:#6b1e29;"><a data-darkreader-inline-color="" href="https://support.westernu.edu/TDClient/Requests/TicketRequests/" style="color: rgb(255, 255, 255); --darkreader-inline-color:#e8e6e3;">View My Tickets</a></div>

<div data-darkreader-inline-bgcolor="" style="background-color: rgb(134, 38, 51); display: block; text-align: center; width: 100%; padding: 15px; margin: 15px 0px; font-size: 18px; border-radius: 5px; --darkreader-inline-bgcolor:#6b1e29;"><a data-darkreader-inline-color="" href="https://support.westernu.edu/TDClient/KB/" style="color: rgb(255, 255, 255); --darkreader-inline-color:#e8e6e3;">Find an Answer</a></div>

<div data-darkreader-inline-bgcolor="" style="background-color: rgb(134, 38, 51); display: block; text-align: center; width: 100%; padding: 15px; margin: 15px 0px; font-size: 18px; border-radius: 5px; --darkreader-inline-bgcolor:#6b1e29;"><a data-darkreader-inline-color="" href="https://support.westernu.edu/TDClient/Requests/TicketRequests/NewForm?ID=6SWhOlfXufY_" style="color: rgb(255, 255, 255); --darkreader-inline-color:#e8e6e3;">Report an IT Issue</a></div>

<div data-darkreader-inline-bgcolor="" style="background-color: rgb(134, 38, 51); display: block; text-align: center; width: 100%; padding: 15px; margin: 15px 0px; font-size: 18px; border-radius: 5px; --darkreader-inline-bgcolor:#6b1e29;"><a data-darkreader-inline-color="" href="https://support.westernu.edu/TDClient/1848/Portal/Requests/ServiceDet?ID=39304&amp;SIDs=4668" style="color: rgb(255, 255, 255); --darkreader-inline-color:#e8e6e3;">Submit a Facilities Request</a></div>

<div data-darkreader-inline-bgcolor="" style="background-color: rgb(134, 38, 51); display: block; text-align: center; width: 100%; padding: 15px; margin: 15px 0px; font-size: 18px; border-radius: 5px; --darkreader-inline-bgcolor:#6b1e29;"><a data-darkreader-inline-color="" href="https://www.westernu.edu/covid-19/" style="color: rgb(255, 255, 255); --darkreader-inline-color:#e8e6e3;" target="_blank">Coronavirus (COVID-19)</a></div>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-4 ui-sortable" id="Column3">
<div class="desktop-module panel panel-default no-border" id="4665983">
<div class="ModuleContent">
<div style="overflow: hidden;">
<div class="section" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-boxshadow="" style="border-color: rgb(134, 38, 51) rgb(193, 193, 193) rgb(193, 193, 193); border-style: solid; border-width: 10px 1px 1px; border-image: none 100% / 1 / 0 stretch; padding: 0px 15px; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px; margin: 15px; --darkreader-inline-border-right: #42474a; --darkreader-inline-border-bottom: #42474a; --darkreader-inline-border-left: #42474a; --darkreader-inline-boxshadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px; --darkreader-inline-border-top: #9e2d3c;">
<div class="row" data-darkreader-inline-border-bottom="" data-darkreader-inline-color="" style="color: rgb(134, 38, 51); font-size: 2em; line-height: 70px; border-bottom: 1px solid; --darkreader-inline-color: #d97986; --darkreader-inline-border-bottom: currentcolor;">
<div class="col-6 col-md-2"><a href="/TDClient/Requests/ServiceCatalog"><img src="https://edassets.westernu.edu/web-assets/tdx/icon-request-support.png" style="width: 46px;  margin:0px 10px 10px 0px;" /></a></div>

<div class="col-12 col-md-10"><a href="/TDClient/Requests/ServiceCatalog">Request Service</a></div>
</div>

<div class="row" data-darkreader-inline-border-bottom="" style="border-bottom: 1px solid rgb(239, 239, 239); padding: 15px 20px; --darkreader-inline-border-bottom: #35393b;">
<div class="col-6 col-md-2"><a href="/TDClient/Requests/ServiceCatalog?CategoryID=12040"><img src="https://edassets.westernu.edu/web-assets/tdx/icon-it.jpg" style="width: 46px;" /></a></div>

<div class="col-12 col-md-10">
<h3 class="category-title" style="margin: 10px;"><a href="/TDClient/Requests/ServiceCatalog?CategoryID=12040">IT Services</a></h3>
</div>
</div>

<div class="row" data-darkreader-inline-border-bottom="" style="border-bottom: 1px solid rgb(239, 239, 239); padding: 15px 20px; --darkreader-inline-border-bottom: #35393b;">
<div class="col-6 col-md-2"><a href="/TDClient/Requests/ServiceCatalog?CategoryID=12041"><img src="https://edassets.westernu.edu/web-assets/tdx/icon-students.jpg" style="width: 46px;" /></a></div>

<div class="col-12 col-md-10">
<h3 class="category-title" style="margin: 10px;"><a href="/TDClient/Requests/ServiceCatalog?CategoryID=12041">Student Services</a></h3>
</div>
</div>

<div class="row" data-darkreader-inline-border-bottom="" style="border-bottom: 1px solid rgb(239, 239, 239); padding: 15px 20px; --darkreader-inline-border-bottom: #35393b;">
<div class="col-6 col-md-2"><a href="/TDClient/Requests/ServiceCatalog?CategoryID=12635"><img src="https://edassets.westernu.edu/web-assets/tdx/icon-health.jpg" style="width: 46px;" /></a></div>

<div class="col-12 col-md-10">
<h3 class="category-title" style="margin: 10px;"><a href="/TDClient/Requests/ServiceCatalog?CategoryID=12635">Clinical Services</a></h3>
</div>
</div>

<div class="row" data-darkreader-inline-border-bottom="" style="border-bottom: 1px solid rgb(239, 239, 239); padding: 15px 20px; --darkreader-inline-border-bottom: #35393b;">
<div class="col-6 col-md-2"><a href="/TDClient/Requests/ServiceCatalog?CategoryID=13525"><img src="https://edassets.westernu.edu/web-assets/tdx/customer.png" style="width: 46px;" /></a></div>

<div class="col-12 col-md-10">
<h3 class="category-title" style="margin: 10px;"><a href="/TDClient/Requests/ServiceCatalog?CategoryID=13525">Employee Services</a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-4 ui-sortable" id="Column4">
<div class="desktop-module panel panel-default no-border" id="4667945">
<div class="ModuleContent">
<div style="overflow: hidden;">
<div class="section" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-border-right="" data-darkreader-inline-border-top="" data-darkreader-inline-boxshadow="" style="border-color: rgb(134, 38, 51) rgb(193, 193, 193) rgb(193, 193, 193); border-style: solid; border-width: 10px 1px 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 20px; padding: 0px 15px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px; margin: 15px; --darkreader-inline-border-right: #42474a; --darkreader-inline-border-bottom: #42474a; --darkreader-inline-border-left: #42474a; --darkreader-inline-boxshadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px; --darkreader-inline-border-top: #9e2d3c;">
<div class="row" data-darkreader-inline-border-bottom="" data-darkreader-inline-color="" style="color: rgb(134, 38, 51); font-size: 2em; line-height: 70px; border-bottom: 1px solid; --darkreader-inline-color: #d97986; --darkreader-inline-border-bottom: currentcolor;">
<div class="col-6 col-md-2"><a href="/TDClient/KB/"><img src="https://stagewp.westernu.edu/mediafiles/teamdynamix/book.png" style="width: 46px; margin: 0px 10px 10px 0px;" /></a></div>

<div class="col-12 col-md-10"><a href="/TDClient/KB/">Knowledge Base</a></div>
</div>

<ul style="padding: 20px">
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/1848/Portal/KB/ArticleDet?ID=71961">Use and Configure Global Protect</a></li>
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/1848/Portal/KB/ArticleDet?ID=106553">Updating Your WesternU Support Ticket</a></li>
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/1848/Portal/KB/ArticleDet?ID=93357">How to Use and Navigate support.westernu.edu</a></li>
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/KB/ArticleDet?ID=74124">Reset Voicemail Password</a></li>
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/1848/Portal/KB/ArticleDet?ID=100502">Using Microsoft Teams</a></li>
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/KB/ArticleDet?ID=74125">Creating a Conference Call</a></li>
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/KB/ArticleDet?ID=70071">Accessing a Shared Mailbox</a></li>
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/KB/ArticleDet?ID=74276">&quot;Error 500 - Internal Server Error&quot; when accessing YOU Portal</a></li>
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/1848/Portal/KB/ArticleDet?ID=71502">Adding WesternU Email to iOS</a></li>
    <li style="padding: 5px"><a href="https://support.westernu.edu/TDClient/KB/ArticleDet?ID=71081">Adding WesternU Email to Android</a></li>
</ul>
</div>
</div>
</div>
</div>

<div class="desktop-module panel panel-default no-border" id="7430857">
<div class="ModuleContent">
<div style="overflow: hidden;"><script src="https://c75mftw86smc.statuspage.io/embed/script.js"></script></div>
</div>
</div>
</div>

Print Article