Client Portal Hub Landing Page (City of Santa Maria)

Body

Introduction

Useful for displaying a landing page when using multiple Client Portals during implementation of TeamDynamix.

This module was originally designed by Andrew Bouwmeester of City of Santa Maria

Screenshot
Module Settings
Module Code

Screenshot

Module Settings

Show Border: unchecked
Show Name: unchecked
Sanitize Content: unchecked

Module Code

To use the code in the box below, when creating a new module:

Click the Source button in the top-left of the WYSIWYG editor
Paste the code from below
Update links or images to match your environment references
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
Save the module

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

article img {
max-width: 100%;
transform-origin: center;
transform: scale(var(--img-scale));
transition: transform 0.4s ease-in-out;
}

.article-body {
padding: 18px;
font-size: 1.5rem;
}

article a {
display: inline-flex;
align-items: center;
text-decoration: none;
font-size: 1.9rem;
color: #28666e;
}

article a:focus {
outline: 1px #28666e;
}

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

/************************
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;
}
.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="" src="https://servicedesk.cityofsantamaria.org/TDPortal/Images/Viewer?fileName=5e350566-d01b-4a48-a82a-3b3357930789.jpg&beidInt=7" /></figure>

<div class="article-body">
<h2>IT Services</h2>

<p>Looking to enter a request for IT? The IT portal can be found here. You can request help with Computers, GIS, Phones, and IT-related services.</p>
<a class="read-more" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/Home/">IT Portal<span class="sr-only">IT Service Portal</span> <svg class="icon" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path clip-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" fill-rule="evenodd"></path> </svg> </a></div>
</div>
</article>

<div class="article-body">
<h2>IT Knowledge Base</h2>

<p>Explore the Knowledge Base of IT self-help articles and guides. Guides and articles will be added constantly, so return frequently.</p>
<a class="read-more" href="https://servicedesk.cityofsantamaria.org/TDClient/47/Portal/KB/">IT Knowledge Base<span class="sr-only">Knowledge Base</span> <svg class="icon" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path clip-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" fill-rule="evenodd"></path> </svg> </a></div>
</div>
</article>

<div class="article-body">
<h2>Facilities</h2>

<p>Looking to enter a request for Facilities? The Facilities portal can be found here. You can request help with HVAC, Custodial, Construction, and various Facilities-related services.</p>
<a class="read-more" href="https://servicedesk.cityofsantamaria.org/TDClient/341/Portal/Home/">Facilities Portal<span class="sr-only">about this is some title</span> <svg class="icon" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path clip-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" fill-rule="evenodd"></path> </svg> </a></div>
</div>
</article>
</section>