Primary Content Blocks for a Home Page - With Sub-buttons

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: Works well in a single column row on a home page; spanning the full 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="desktop-module panel panel-default no-border">
<div class="ModuleContent">
<div style="overflow: hidden;">
<div class="container-fluid hidden-xs" style="padding: 0">

<!-- First row with 2 blocks -->
<div class="row">
<div class="col-md-6" style="margin-top: 1em">
<div class="container-fluid" style="border-radius: .25em; padding: 5px; border: 1px solid #eaeaea; background: #fafafa; min-height: 272px;">
<div class="row">
<div class="col-md-12" style="font-size: 30px">
<div style="padding: 15px; text-align: left;">
<div style="display: inline-block; color: #24235a;"><strong><span aria-label="span widget"><span aria-hidden="true" aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span class="fa fa-list-check" style="font-size: 30px;"></span></span></span>&nbsp;Submit a Request or Form</strong></div>
</div>

<div style="padding: 0 15px 0 15px; text-align: left;">
<div style="font-family: georgia; font-size: 20px; min-height: 82px;">Use the categories below to browse services and forms:</div>

<div class="clearfix" style="margin-top: .5em; margin-bottom: 1.25em;">
<div class="row">

<!-- First button -->
<div class="col-md-6 col-xs-12" style="margin-bottom: 10px;"><a class="btn btn-primary col-md-12" href="URL HERE" style="background: #fafafa; text-decoration: none; color: #24235a; border: 3px solid #24235a; border-radius: 30px; padding: 10px 30px; text-align: center;"><strong>Technology Services</strong> </a></div>
<!-- Second button -->

<div class="col-md-6 col-xs-12" style="margin-bottom: 10px;"><a class="btn btn-primary col-md-12" href="URL HERE" style="background: #fafafa; text-decoration: none; color: #24235a; border: 3px solid #24235a; border-radius: 30px; padding: 10px 30px; text-align: center;"><strong>Marketing</strong> </a></div>
<!-- Third button -->

<div class="col-md-6 col-xs-12"><a class="btn btn-primary col-md-12" href="URL HERE" style="background: #fafafa; text-decoration: none; color: #24235a; border: 3px solid #24235a; border-radius: 30px; padding: 10px 30px; text-align: center;"><strong>Facilities</strong> </a></div>
<!-- Fourth button -->

<div class="col-md-6 col-xs-12"><a class="btn btn-primary col-md-12" href="URL HERE" style="background: #fafafa; text-decoration: none; color: #24235a; border: 3px solid #24235a; border-radius: 30px; padding: 10px 30px; text-align: center;"><strong>Human Resources</strong> </a></div>
</div>
<!-- end row --></div>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-6" style="margin-top: 1em">
<div class="container-fluid" style="border-radius: .25em; padding: 5px; border: 1px solid #eaeaea; background: #fafafa; min-height: 272px;">
<div class="row">
<div class="col-md-12" style="font-size: 30px">
<div style="padding: 15px; text-align: left;">
<div style="display: inline-block; color: #24235a;"><strong><span aria-label="span widget"><span aria-hidden="true" aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span class="fa fa-book" style="font-size: 30px;"></span></span></span>&nbsp;Knowledge Base</strong></div>
</div>

<div style="padding: 0 15px 0 15px; text-align: left;">
<div style="font-family: georgia; font-size: 20px; min-height: 140px;">Prefer to find a solution on your own? View our collection of knowledge base articles to find a self-help solution (<em>without generating a help ticket</em>).</div>

<div class="clearfix" style="margin-top: .5em; margin-bottom: 1.25em;"><a class="btn btn-primary col-md-12 col-xs-12" href="URL HERE" style="background: #fafafa; text-decoration: none; color: #24235a; border: 3px solid #24235a; border-radius: 30px; padding: 10px 30px; min-width: 178px; text-align: center;"><strong>Browse Articles</strong> </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Second row with 2 blocks -->

<div class="row">
<div class="col-md-6" style="margin-top: 1em">
<div class="container-fluid" style="border-radius: .25em; padding: 5px; border: 1px solid #eaeaea; background: #fafafa; min-height: 272px;">
<div class="row">
<div class="col-md-12" style="font-size: 30px">
<div style="padding: 15px; text-align: left;">
<div style="display: inline-block; color: #24235a;"><strong><span aria-label="span widget"><span aria-hidden="true" aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span class="fa fa-search" style="font-size: 30px;"></span></span></span>&nbsp;Search the Service Portal</strong></div>
</div>

<div style="padding: 0 15px 0 15px; text-align: left;">
<div style="font-family: georgia; font-size: 20px; min-height: 140px;">Use the search function to type in your question and the list of results will help you submit a ticket or resolve your own issue.</div>

<div class="clearfix" style="margin-top: .5em; margin-bottom: 1.25em;"><a class="btn btn-primary col-md-12 col-xs-12" href="URL HERE" style="background: #fafafa; text-decoration: none; color: #24235a; border: 3px solid #24235a; border-radius: 30px; padding: 10px 30px; min-width: 178px; text-align: center;"><strong>Search Portal</strong> </a></div>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-6" style="margin-top: 1em">
<div class="container-fluid" style="border-radius: .25em; padding: 5px; border: 1px solid #eaeaea; background: #fafafa; min-height: 272px;">
<div class="row">
<div class="col-md-12" style="font-size: 30px">
<div style="padding: 15px; text-align: left;">
<div style="display: inline-block; color: #24235a;"><strong><span aria-label="span widget"><span aria-hidden="true" aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span class="fa fa-ticket" style="font-size: 30px;"></span></span></span>&nbsp;Check My Tickets</strong></div>
</div>

<div style="padding: 0 15px 0 15px; text-align: left;">
<div style="font-family: georgia; font-size: 20px; min-height: 140px;">Already submitted a help ticket? Check your ticket status or see other tickets you have created (or which mark you as the requestor).</div>

<div class="clearfix" style="margin-top: .5em; margin-bottom: 1.25em;"><a class="btn btn-primary col-md-12 col-xs-12" href="URL HERE" style="background: #fafafa; text-decoration: none; color: #24235a; border: 3px solid #24235a; border-radius: 30px; padding: 10px 30px; min-width: 178px; text-align: center;"><strong>Check Status</strong> </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
 

Print Article

Attachments (0)

No attachments found.