# TDX HTML Modules
> [!tip]
> `HTML` modules are **NOT** sanitized server-side by TDX
# Knowledge Base Category Grid
**NOTE**: in the code, several disallowed properties are present, such as `@media`, that allow for the animation behaviors of the grid categories.
```html
<h1 style="text-align: center"> </h1>
<hr />
<h1 style="text-align: center"><strong>Knowledge Base</strong></h1>
<br />
<br />
<style type="text/css">
article {
--img-scale: 1.001;
--title-color: black;
--link-icon-translate: -20px;
--link-icon-opacity: 0;
position: relative;
border-radius: 16px;
box-shadow:
rgba(0, 0, 0, 0.16) 0px 0px 1px 0px,
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
background: #fff;
transform-origin: center;
transition: all 0.4s ease-in-out;
overflow: hidden;
}
article a::after {
position: absolute;
inset-block: 0;
inset-inline: 0;
cursor: pointer;
content: "";
}
/* basic article elements styling */
article h2 {
margin: 0 0 18px 0;
font-family: "Arial", cursive;
font-size: 2.9rem;
font-weight: bold;
letter-spacing: 0.06em;
color: var(--title-color);
transition: color 0.3s ease-out;
}
figure {
margin: 0;
padding: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
a:hover,
.btn-link:hover {
color: #002566;
}
article img {
max-width: 100%;
transform-origin: center;
transform: scale(var(--img-scale));
transition: transform 0.4s ease-in-out;
}
.article-body {
padding: 18px;https://support.stedwards.edu/TDClient/96/Portal/Requests/ServiceCatalog?CategoryID=193
font-size: 1.5rem;
}
article a {
display: inline-flex;
align-items: center;
text-decoration: none;
font-size: 1.9rem;
color: #004d8e;
}
article a:focus {
outline: 1px #002566;
}
article a .icon {
min-width: 24px;
width: 24px;
height: 24px;
margin-left: 5px;
transform: translateX(var(--link-icon-translate));
opacity: var(--link-icon-opacity);
transition: all 0.3s;
}
/* using the has() relational pseudo selector to update our custom properties */
article:has(:hover, :focus) {
--img-scale: 1.1;
--title-color: #244ca3;https://support.stedwards.edu/TDClient/96/Portal/Requests/ServiceCatalog?CategoryID=193
--link-icon-translate: 0;
--link-icon-opacity: 1;
box-shadow:
rgba(0, 0, 0, 0.16) 0px 10px 16px 0px,
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
/************************Printers
Generic layout (demo looks)
**************************/
*,
*::before,
*::after {
box-sizing: border-box;
}
.articles {
display: grid;
max-width: 1200px;
margin-inline: auto;
padding-inline: 24px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
@media screen and (max-width: 960px) {
article {
container: card/inline-size;
}https://support.stedwards.edu/TDClient/96/Portal/Requests/ServiceCatalog?CategoryID=193
.article-body p {
display: none;
}
}
@container card (min-width: 380px) {
.article-wrapper {
display: grid;
grid-template-columns: 100px 1fr;
gap: 16px;
}
.article-body {
padding-left: 0;
}
figure {
width: 100%;
height: 100%;
overflow: hidden;
}
figure img {
height: 100%;
aspect-ratio: 1;
object-fit: cover;
}
}
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
</style>
<section class="articles">
<article>
<div class="article-wrapper">
<figure>
<img
alt="Accounts, Identity & Access"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=a7533785-98b9-4b6a-9e70-0fe3559bfb8e.png&beidInt=23"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=172"
style="border-bottom: none !important"
>Account Management<span style="color: #004d8e"></span
><span style="color: #004d8e"></span
></a>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Classroom Support"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=89e7e8a5-a686-4e02-bb41-f373397cb73d.png&beidInt=23"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=424"
style="border-bottom: none !important"
>Classroom Support</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Email, Calendar & Productivity"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=0091068d-d108-46c1-b259-9400f4e4a57e.png&beidInt=23"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=173"
style="border-bottom: none !important"
>Communication & Collaboration</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Internet, Phone & Video"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=946b16d8-d8bc-4ca5-823f-658023566f2d.png&beidInt=23"
style="width: 385px; height: 385px"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=178"
style="border-bottom: none !important"
>Network & Connectivity</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Labs & Printers"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=8f9d728d-1dfa-4107-945c-dcce62dcb999.png&beidInt=23"
style="width: 385px; height: 385px"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=426"
style="border-bottom: none !important"
>Computers & Printing</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Munday Library"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=ea08afab-183c-49e1-ab54-89f7fac26efc.png&beidInt=23"
style="width: 385px; height: 385px"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=427"
style="border-bottom: none !important"
>Munday Library</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Security"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=e575a65f-4d02-40c3-8301-4c160e1bccfe.png&beidInt=23"
style="width: 385px; height: 385px"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=175"
style="border-bottom: none !important"
>Security & Policy</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Teaching & Learning Tools"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=249adf65-c7a6-42b2-a65f-9059b9d344b6.png&beidInt=23"
style="width: 385px; height: 385px"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=428"
style="border-bottom: none !important"
>Teaching & Learning</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Websites & Blogs"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=e555aa18-5394-425a-b21a-f1decac77afc.png&beidInt=23"
style="width: 385px; height: 385px"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=429"
style="border-bottom: none !important"
>Web Services</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Servers, Storage & Backup"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=c552b285-4d68-468e-a87a-06cb64f8ac92.png&beidInt=23"
style="width: 385px; height: 385px"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=843"
style="border-bottom: none !important"
>Servers, Storage & Backup</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
385px=""
alt="Software & Administrative Apps"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=52a5374b-0259-4109-92f2-8157426fe789.png&beidInt=23"
style="width: ="
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=845"
style="border-bottom: none !important"
>Software & Administrative Apps</a
>
</h2>
</div>
</div>
</article>
<article>
<div class="article-wrapper">
<figure>
<img
alt="Other Departmental Services"
src="https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=9cbb55bd-c83b-40a3-8ee0-792424c4124a.png&beidInt=23"
style="width: 385px; height: 385px"
/>
</figure>
<div class="article-body">
<h2>
<a
href="https://support.stedwards.edu/TDClient/96/Portal/KB/?CategoryID=844"
style="border-bottom: none !important"
>Other Departmental Services</a
>
</h2>
</div>
</div>
</article>
</section>
<div> </div>
```
# Search Bar
**Note**: there are `JS` functions insde `<script>` tags that allow the search bar to function.
```html
<div
class="container-fluid headerBlock"
style="padding-left: 0; padding-right: 0"
>
<div class="row" style="margin: 0 auto">
<div
class="col-md-12"
style="
min-height: 450px;
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("https://support.stedwards.edu/TDPortal/Images/Viewer?fileName=68d5ab55-b3dc-4ac4-bf36-8c371bbc7368.jpg&beidInt=23");
background-position: top;
background-size: cover;
background-repeat: no-repeat;
"
>
<div class="row">
<div class="col-md-6" style="margin: 50px 20px 0">
<div class="row" style="padding: 15px">
<div class="col-md 12">
<h1
style="
text-shadow: rgba(41, 41, 41, 0.1) 1px 1px
1px;
letter-spacing: -0.02rem;
"
>
<font color="#ffffff"
><span style="font-size: 40px"
><br />
<br />
<br />
<br />
<b>How can we help?</b></span
></font
><br />
</h1>
</div>
</div>
<div class="row">
<div class="col-md-12" style="padding: 10px 5px">
<div
class="gutter-bottom input-group site-search"
id="SiteSearch-9f1813bc7cdc49ed946563a9aa77a323"
style="
max-width: 600px;
margin-left: 10px;
margin-right: auto;
"
>
<div
class="input-group-btn"
id="SiteSearch-dropdown-5e5d167516c3477a98004dea64d6aecb"
>
<button
aria-expanded="false"
aria-haspopup="true"
class="btn btn-default dropdown-toggle"
data-component="all"
data-component-icon="fa-reorder"
data-gramm="false"
data-toggle="dropdown"
id="SiteSearch-filter-5e5d167516c3477a98004dea64d6aecb"
spellcheck="false"
title="Filter your search by categories"
type="button"
>
<span
aria-label="icon"
contenteditable="false"
role="region"
tabindex="-1"
><span
class="fa fa-reorder"
></span></span
><span
aria-label="icon"
contenteditable="false"
role="region"
tabindex="-1"
><span
aria-hidden="true"
class="fa fa-fw fa-nopad fa-caret-down"
></span
></span>
<span class="sr-only">
Filter your search by category.
Current category:
<span class="js-current-component"
>All</span
>
</span>
</button>
<ul
class="dropdown-menu"
style="z-index: 90"
>
<li>
<a
data-component="all"
data-component-text="Entire Site"
href="javascript:void(0);"
title="Search all areas"
><span
aria-label="icon"
contenteditable="false"
role="region"
tabindex="-1"
><span
aria-hidden="true"
class="fa fa-fw fa-nopad fa-globe"
></span
></span>
Entire Site</a
>
</li>
<li class="divider" role="separator">
</li>
<li role="presentation">
<a
data-component="kb"
data-component-icon="fa-lightbulb-o"
data-component-text="Knowledge Base"
href="javascript:void(0);"
role="menuitem"
title="Search Knowledge Base"
><span
aria-label="icon"
contenteditable="false"
role="region"
tabindex="-1"
><span
aria-hidden="true"
class="fa fa-fw fa-nopad fa-lightbulb-o"
></span
></span>
Knowledge Base
</a>
</li>
<li role="presentation">
<a
data-component="sc"
data-component-icon="fa-compass"
data-component-text="Service Catalog"
href="javascript:void(0);"
role="menuitem"
title="Search Service Catalog"
><span
aria-label="icon"
contenteditable="false"
role="region"
tabindex="-1"
><span
aria-hidden="true"
class="fa fa-fw fa-nopad fa-compass"
></span
></span>
Service Catalog
</a>
</li>
</ul>
</div>
<input
aria-label="Search the Enterprise Service Site"
autocomplete="on"
class="form-control"
id="SiteSearch-text-5e5d167516c3477a98004dea64d6aecb"
placeholder="Services and Knowledge Base Articles"
title="To search for items with a specific tag, enter the # symbol followed by the name of the tag.
To search for items using exact match, place double quotes around your text."
type="text"
/>
<span class="input-group-btn"
><button
active=""
class="btn btn-default"
id="SiteSearch-button-5e5d167516c3477a98004dea64d6aecb"
title="Search"
type="button"
>
<span
aria-label="icon"
contenteditable="false"
role="region"
tabindex="-1"
><span
aria-hidden="true"
class="fa fa-fw fa-nopad fa-search blue"
></span>
Search</span
>
<span class="sr-only">Search</span>
</button>
</span>
</div>
<script>
$(function () {
var siteSearch = new TeamDynamix.SiteSearch(
{
searchUrl:
"/TDClient/96/Portal/Shared/Search",
autocompleteSearchUrl:
"/TDClient/96/Portal/Shared/AutocompleteSearch",
autocompleteResultsPosition:
"fixed",
autocompleteResultsZIndex: 1000,
searchTextBoxSelector:
"#SiteSearch-text-5e5d167516c3477a98004dea64d6aecb",
searchComponentFilterButtonSelector:
"#SiteSearch-filter-5e5d167516c3477a98004dea64d6aecb",
searchButtonSelector:
"#SiteSearch-button-5e5d167516c3477a98004dea64d6aecb",
searchFilterDropdownSelector:
"#SiteSearch-dropdown-5e5d167516c3477a98004dea64d6aecb",
showKnowledgeBaseOption: true,
showServicesOption: true,
showForumsOption: true,
autoFocusSearch: false,
},
);
});
</script>
</div>
<div class="row">
<div class="col-md-6" style="padding: 10px 15px">
<a
class="btn btn-primary"
href="https://support.stedwards.edu/TDClient/96/Portal/Requests/TicketRequests/NewForm?ID=bbJCGcWnH1c_&RequestorType=Service"
style="
width: 20vw%;
padding-top: 12px;
padding-bottom: 12px;
font-size: 1.5rem;
box-shadow: 0 1px 10px
rgba(41, 41, 41, 0.2);
"
><strong
>Need more help?
<u>Submit a ticket</u></strong
><u>
<span
aria-label="icon"
role="region"
tabindex="-1"
><span
aria-hidden="true"
class="fa fa-chevron-right"
style="
padding-left: 5px;
font-size: 0;
"
> </span
></span
></u
></a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
```