Ticket Submission Button Grid (Colorado School of Mines)

Introduction

A grid of buttons, 3 columns of 5 rows, with images in the background behind the service request name.

This module was originally designed by Colorado School of Mines.

Screenshot

A grid of buttons, 3 columns of 5 rows, with monochrome background images that fade to black behind the name of different ticket request types. The bottom left button is monochrome red.

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 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

<div class="ModuleContent">
<div style="overflow: hidden;">
<h2>Submit a Ticket</h2>

<div style="overflow: hidden">
<div class="row" style="margin: 0 auto; max-width: 1170px">
<div class="col-md-12" style="padding-left: 0; padding-right: 0">
<div class="col-md-12">
<div class="row articleGridTop" style="padding-left: 5px; padding-right: 5px; padding-top: 0">
<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=59507e72-03dd-4516-a306-e302d5670891.png&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/TicketRequests/NewForm?ID=1aruqGiFfrE_&amp;RequestorType=Service" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Accounts, Passwords, &amp; Access</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=49d8d835-2b44-4711-b7b7-c4bcc0a4c06e.png&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/TicketRequests/NewForm?ID=CE7YCpW%7esM4_&amp;RequestorType=Service" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Email / Calendar</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=281e0f42-70f8-4a08-b34f-cce6e5b76ac9.png&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/TicketRequests/NewForm?ID=2smnwYbYVoA_&amp;RequestorType=Service" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Printing</big></a></div>
</div>
</div>
</div>

<div class="row articleGridMiddle" style="padding-left: 5px; padding-right: 5px; padding-top: 0">
<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=c55af29d-c497-46cd-9036-520c5b22ab5b.png&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/ServiceCatalog?CategoryID=11043" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>WiFi / Network</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=c760190f-72f1-495b-a7ed-a97309160912.png&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/ServiceCatalog?CategoryID=11271" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Information Security / PCI</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=e6fb26d5-d702-4c7b-9370-acbe0e70ffa0.png&amp;beidInt=299&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/TicketRequests/NewForm?ID=hEITn5HG5n4_&amp;RequestorType=Service" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Telecom / Voicemail</big></a></div>
</div>
</div>
</div>

<div class="row articleGridMiddle" style="padding-left: 5px; padding-right: 5px; padding-top: 0">
<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=95dafdfb-1eb1-424d-bcf0-0041d437503f.png&amp;beidInt=299&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/TicketRequests/NewForm?ID=wt1OCDecJbg_&amp;RequestorType=Service" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Software / Hardware Issue</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=5bb7a23a-f3fa-4aa7-8d8b-e62600de4460.png&amp;beidInt=299&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/TicketRequests/NewForm?ID=3FfX91LMVk8_&amp;RequestorType=Service" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Help Center Issue</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=c44232e5-b3a5-46bb-bdca-6887e4480f16.png&amp;beidInt=299&amp;beidInt=299&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/TicketRequests/NewForm?ID=6nm-KdXGAE8_&amp;RequestorType=Service" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Accessibility</big></a></div>
</div>
</div>
</div>

<div class="row articleGridBottom" style="padding-left: 5px; padding-right: 5px; padding-top: 0">
<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=5bf4beeb-7e3f-44dc-95c3-b2f062997009.png&amp;beidInt=299&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/ServiceCatalog?CategoryID=11026" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Teaching &amp; Learning</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=c1e8ce12-52e8-42ae-a4c6-51b5d148b777.png&amp;beidInt=299&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/ServiceCatalog?CategoryID=11033" style="display: block; min-height: 110px; padding-top: 37px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>Web, ITS Business, &amp;<br />
Administrative Services</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=4c8b292e-4d93-4be0-a560-b6b9df28cd81.png&amp;beidInt=299&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/TicketRequests/NewForm?ID=4GCQlvW5OYk_&amp;RequestorType=Service" style="display: block; min-height: 110px; padding-top: 37px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>High Performance Computing &amp; Storage</big></a></div>
</div>
</div>
</div>

<div class="row articleGridBottom" style="padding-left: 5px; padding-right: 5px; padding-top: 0">
<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=6980cb04-0a86-46ef-a6be-23f035e0cac3.png&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/TicketRequests/NewForm?ID=f4Kaczvky5g_" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big><strong>Urgent!</strong> Classroom Down</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=f3aac77d-2759-44d4-b67f-8d57edbaac28.png&amp;beidInt=299&amp;beidInt=299&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/ServiceDet?ID=30866" style="display: block; min-height: 110px; padding-top: 40px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>I Need Help /<br />
General IT Support</big></a></div>
</div>
</div>

<div class="col-md-4">
<div class="row blockIsolation" style="padding-left: 5px; padding-right: 5px">
<div class="col-md-12 articleBlock" style="padding: 0; margin-top: 10px; background-image: url(&quot;https://helpcenter.mines.edu/TDPortal/Images/Viewer?fileName=9d42da96-a876-41aa-9cac-bbf84f259ab1.png&amp;beidInt=299&amp;beidInt=299&amp;beidInt=299&quot;); background-size: cover; background-position: center; background-repeat: no-repeat"><a class="articleItem" href="https://helpcenter.mines.edu/TDClient/1946/Portal/Requests/ServiceCatalog" style="display: block; min-height: 110px; padding-top: 70px; padding-left: 20px; font-size: 1.75rem; color: #FFFFFF; background: linear-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.8) 100%); text-shadow: 1px 1px #505258; border-bottom: 0 none"><big>All ITS Services</big></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

100% helpful - 1 review
Print Article