Skip to Content

Changes for page Sandbox Test Page 3

Last modified by Jareth Carpenter on 2026/08/20 22:29
From version 65.1
edited by Jareth Carpenter
on 2026/08/20 21:47
Change comment: There is no comment for this version
To version 51.1
edited by Jareth Carpenter
on 2026/08/17 22:43
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,327 +1,359 @@
1 1  {{html clean="false"}}
2 2  <!--
3 - XWiki usage: paste everything in this file into an HTML macro on your
4 - Home / WebHome page, e.g.
5 -
6 - {{html clean="false"}}
7 - ... paste this whole file's contents here ...
8 - {{/html}}
9 -
10 - This is a self-contained FRAGMENT (no <html>/<head>/<body> tags) scoped
11 - under the .fd-home wrapper so it won't leak styles onto the rest of the
12 - XWiki page or get double-rendered inside the page's own template.
13 -
14 - BEFORE PUBLISHING: update the three placeholder hrefs below
15 - (search for "REPLACE_WITH_") to point at your actual XWiki spaces, e.g.
16 - href="$xwiki.getURL('VoiceServices.WebHome')" or a relative link such as
17 - "../VoiceServices/WebHome".
3 + ============================================================
4 + FirstDigital - Learning Center Menu (XWiki fragment)
5 + ============================================================
6 + HOW TO USE
7 + 1. Edit the wiki page in SOURCE / WIKI mode (never WYSIWYG).
8 + 2. Select all existing page content and delete it.
9 + 3. Paste:
10 + ...everything in this file...
11 + 4. Save & View.
12 + IMPORTANT
13 + - This file is a FRAGMENT. It deliberately contains no DOCTYPE
14 + declaration and no html / head / body elements. Everything is
15 + scoped inside .fdm-hub so it cannot leak into the wiki theme.
16 + - After saving, only ever re-edit this page in SOURCE mode.
17 + Opening it in the WYSIWYG editor and saving can duplicate the
18 + content, because XWiki may expand the macro output into the page
19 + body while also keeping the macro itself.
20 + - All six links are unchanged from your original page, including
21 + the ?oidc.skipped= parameters on the two footer links.
22 + - Product logos still load from your wiki. The five photographs
23 + are embedded (base64) from the Brand Guide 2025, p.13, so they
24 + need no hosting. To swap one for a hosted image instead, replace
25 + that img's src="data:image/jpeg;base64,..." with a URL.
26 + ============================================================
18 18  -->
19 19  <style>
20 - @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');
21 -
22 - .fd-home, .fd-home *{ box-sizing:border-box; }
23 -
24 - .fd-home{
25 - --fd-navy:#003366;
26 - --fd-blue:#307ab2;
27 - --fd-sky:#38b2e3;
28 - --fd-red:#cf333d;
29 - --fd-slate:#2e404d;
30 - --fd-grey:#8f9499;
31 - --fd-lightgrey:#dedede;
32 - --fd-offwhite:#f0f0f0;
33 - --fd-max-w:1040px;
34 -
35 - display:block;
36 - font-family:'Host Grotesk','Poppins','Segoe UI',system-ui,sans-serif;
37 - color:var(--fd-slate);
38 - background:#ffffff;
39 - font-weight:300;
40 - line-height:1.6;
29 +@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;600;800&display=swap');
30 + /* Safety net: if the wiki ever renders this block twice,
31 + show only the first copy. */
32 + .fdm-hub ~ .fdm-hub { display: none !important; }
33 + /* ---- FirstDigital brand tokens (Brand Guide 2025, p.11) ---- */
34 + .fdm-hub {
35 + --fd-navy: #003366; /* headlines, backgrounds, icons */
36 + --fd-blue: #307ab2; /* headlines, backgrounds, icons */
37 + --fd-blue-bright: #38b2e3; /* stand-out headlines, icons */
38 + --fd-red: #cf333d; /* accents - use selectively */
39 + --fd-body: #2e404d; /* paragraph text */
40 + --fd-secondary: #8f9499; /* secondary text */
41 + --fd-bg-mid: #dedede; /* backgrounds */
42 + --fd-bg-light: #f0f0f0; /* backgrounds */
43 + --fd-white: #ffffff;
44 + --ms-azure: #0078d4; /* Microsoft's own brand blue */
41 41   }
42 -/* ---- Footer ---- */
43 - .fdm-footer {
44 - margin-top: 32px;
45 - padding-top: 18px;
46 - border-top: 1px solid var(--fd-bg-mid);
46 + .fdm-hub, .fdm-hub * { box-sizing: border-box; }
47 + .fdm-hub {
48 + font-family: 'Host Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
49 + font-weight: 300;
50 + color: var(--fd-body);
51 + background: var(--fd-white);
52 + max-width: 1000px;
53 + margin: 0 auto;
54 + padding: 0 20px 28px;
55 + -webkit-font-smoothing: antialiased;
56 + }
57 + /* ---- Masthead: full-colour logo on white (Logo Rules, p.10) ---- */
58 + .fdm-masthead {
47 47   display: flex;
48 - justify-content: center;
49 49   align-items: center;
61 + justify-content: space-between;
62 + gap: 20px;
50 50   flex-wrap: wrap;
51 - gap: 14px;
52 - font-size: 13px;
64 + padding: 22px 0 18px;
65 + border-bottom: 1px solid var(--fd-bg-mid);
53 53   }
54 - .fdm-footer a {
67 + .fdm-masthead img { height: 46px; width: auto; display: block; }
68 + .fdm-masthead-label {
69 + font-size: 12px;
55 55   font-weight: 600;
56 - text-decoration: none !important;
57 - color: var(--fd-blue);
71 + letter-spacing: 0.16em;
72 + text-transform: uppercase;
73 + color: var(--fd-secondary);
74 + white-space: nowrap;
58 58   }
59 -
60 - .fdm-footer a:hover { text-decoration: underline !important; }
61 -
62 - .fdm-footer a:focus-visible {
63 - outline: 2px solid var(--fd-blue-bright);
64 - outline-offset: 3px;
76 + /* ---- Hero ---- */
77 + .fdm-hero {
78 + position: relative;
79 + margin-top: 22px;
80 + border-radius: 6px;
81 + overflow: hidden;
82 + min-height: 250px;
83 + display: flex;
84 + align-items: flex-end;
65 65   }
66 -
67 - .fd-home a{ color:var(--fd-blue); }
68 -
69 - /* ---------- HERO ---------- */
70 - .fd-home .hero{
71 - position:relative;
72 - background:var(--fd-navy);
73 - overflow:hidden;
74 - padding:56px 32px 68px;
75 - text-align:center;
86 + .fdm-hero-img {
87 + position: absolute;
88 + top: 0; right: 0; bottom: 0; left: 0;
89 + width: 100%; height: 100%;
90 + object-fit: cover;
91 + display: block;
76 76   }
77 - .fd-home .hero-inner{
78 - max-width:var(--fd-max-w);
79 - margin:0 auto;
80 - position:relative;
81 - z-index:2;
93 + /* explicit offsets, not the inset shorthand, for wider support */
94 + .fdm-hero::after {
95 + content: "";
96 + position: absolute;
97 + top: 0; right: 0; bottom: 0; left: 0;
98 + background: linear-gradient(100deg,
99 + rgba(0,51,102,0.94) 0%,
100 + rgba(0,51,102,0.86) 42%,
101 + rgba(0,51,102,0.30) 100%);
82 82   }
83 - .fd-home .hero .logo{
84 - height:36px;
85 - margin:0 auto 28px;
86 - display:block;
103 + .fdm-hero-inner {
104 + position: relative;
105 + z-index: 1;
106 + padding: 32px 32px 30px;
107 + max-width: 600px;
87 87   }
88 - .fd-home .hero p.kicker{
89 - color:var(--fd-sky);
90 - font-weight:700;
91 - text-transform:uppercase;
92 - letter-spacing:.08em;
93 - font-size:.8rem;
94 - margin:0 0 10px;
109 + /* red rule = brand accent motif (Brand Guide p.4) */
110 + .fdm-rule {
111 + width: 62px; height: 4px;
112 + background: var(--fd-red);
113 + border: 0;
114 + margin: 0 0 16px;
95 95   }
96 - .fd-home .hero h1{
97 - color:#ffffff;
98 - font-weight:800;
99 - font-size:2.5rem;
100 - margin:0 0 14px;
101 - letter-spacing:-0.01em;
116 + .fdm-eyebrow {
117 + font-size: 12px;
118 + font-weight: 600;
119 + letter-spacing: 0.18em;
120 + text-transform: uppercase;
121 + color: var(--fd-blue-bright);
122 + margin-bottom: 9px;
102 102   }
103 - .fd-home .hero p.sub{
104 - color:#dbe9f4;
105 - font-weight:300;
106 - font-size:1.05rem;
107 - max-width:520px;
108 - margin:0 auto;
124 + .fdm-hero h1 {
125 + font-size: clamp(26px, 3.6vw, 36px);
126 + font-weight: 800;
127 + line-height: 1.14;
128 + letter-spacing: -0.01em;
129 + color: var(--fd-white);
130 + margin: 0 0 11px;
109 109   }
110 - .fd-home .wave{
111 - position:absolute;
112 - top:0; right:0; bottom:0;
113 - width:70%;
114 - z-index:1;
115 - pointer-events:none;
132 + .fdm-hero p {
133 + font-size: 15px;
134 + font-weight: 300;
135 + line-height: 1.6;
136 + color: #dbe6ef;
137 + margin: 0;
138 + max-width: 470px;
116 116   }
117 -
118 - /* ---------- SEARCH-LIKE UTILITY STRIP (optional quick note) ---------- */
119 - .fd-home .utility-strip{
120 - background:var(--fd-offwhite);
121 - border-bottom:1px solid var(--fd-lightgrey);
122 - padding:14px 32px;
123 - text-align:center;
140 + /* ---- Card grid ---- */
141 + .fdm-grid {
142 + display: grid;
143 + grid-template-columns: repeat(2, 1fr);
144 + gap: 22px;
145 + margin-top: 24px;
124 124   }
125 - .fd-home .utility-strip p{
126 - margin:0;
127 - font-size:.85rem;
128 - color:var(--fd-grey);
129 - font-weight:500;
147 + .fdm-card {
148 + display: flex;
149 + flex-direction: column;
150 + background: var(--fd-white);
151 + border: 1px solid var(--fd-bg-mid);
152 + border-radius: 6px;
153 + overflow: hidden;
154 + text-decoration: none !important;
155 + color: inherit;
156 + height: 100%;
157 + transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
130 130   }
131 -
132 - /* ---------- CARD GRID ---------- */
133 - .fd-home main{
134 - max-width:var(--fd-max-w);
135 - margin:0 auto;
136 - padding:56px 32px 24px;
159 + .fdm-card:hover {
160 + transform: translateY(-3px);
161 + border-color: var(--fd-blue-bright);
162 + box-shadow: 0 12px 26px rgba(0,51,102,0.14);
137 137   }
138 - .fd-home .section-label{
139 - color:var(--fd-navy);
140 - font-weight:800;
141 - font-size:1.15rem;
142 - margin:0 0 6px;
164 + .fdm-card:focus-visible {
165 + outline: 3px solid var(--fd-blue-bright);
166 + outline-offset: 2px;
143 143   }
144 - .fd-home .section-rule{
145 - width:56px;
146 - height:4px;
147 - background:var(--fd-red);
148 - border:none;
149 - border-radius:2px;
150 - margin:0 0 32px;
168 + .fdm-media {
169 + position: relative;
170 + height: 132px;
171 + background: var(--fd-bg-light);
172 + flex: 0 0 auto;
173 + /* no overflow:hidden here - the logo badge overhangs the bottom
174 + edge on purpose. The photo is already clipped by object-fit,
175 + and .fdm-card's own overflow:hidden keeps the rounded corners. */
151 151   }
152 -
153 - .fd-home .card-grid{
154 - display:grid;
155 - grid-template-columns:repeat(3, 1fr);
156 - gap:24px;
177 + .fdm-media img {
178 + width: 100%; height: 100%;
179 + object-fit: cover;
180 + display: block;
157 157   }
158 -
159 - .fd-home .card{
160 - display:flex;
161 - flex-direction:column;
162 - background:#ffffff;
163 - border:1px solid var(--fd-lightgrey);
164 - border-radius:14px;
165 - padding:32px 28px;
166 - text-decoration:none;
167 - transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
182 + .fdm-media::after {
183 + content: "";
184 + position: absolute;
185 + top: 0; right: 0; bottom: 0; left: 0;
186 + background: linear-gradient(180deg,
187 + rgba(0,51,102,0.06) 0%, rgba(0,40,79,0.52) 100%);
168 168   }
169 - .fd-home .card:hover{
170 - box-shadow:0 12px 28px rgba(0,51,102,.12);
171 - border-color:var(--fd-sky);
172 - transform:translateY(-2px);
189 + /* white badge keeps every logo brand-legal over a photo (p.10) */
190 + .fdm-badge {
191 + position: absolute;
192 + left: 18px;
193 + bottom: 0;
194 + z-index: 1;
195 + transform: translateY(50%);
196 + width: 58px; height: 58px;
197 + border-radius: 8px;
198 + background: var(--fd-white);
199 + box-shadow: 0 5px 14px rgba(0,0,0,0.18);
200 + display: flex;
201 + align-items: center;
202 + justify-content: center;
203 + overflow: hidden;
173 173   }
174 - .fd-home .card .icon-badge{
175 - width:56px;
176 - height:56px;
177 - border-radius:50%;
178 - background:var(--fd-offwhite);
179 - display:flex;
180 - align-items:center;
181 - justify-content:center;
182 - margin-bottom:20px;
205 + .fdm-badge img { object-fit: contain; display: block; }
206 + .fdm-logo-webex { width: 74%; height: auto; }
207 + .fdm-logo-teams { width: 64%; height: auto; }
208 + .fdm-logo-firstdigital { width: 84%; height: auto; }
209 + /* icons: dark-blue stroke, bright-blue accent (Brand Guide p.14) */
210 + .fdm-badge svg {
211 + width: 26px; height: 26px;
212 + fill: none;
213 + stroke: var(--fd-navy);
214 + stroke-width: 1.7;
215 + stroke-linecap: round;
216 + stroke-linejoin: round;
183 183   }
184 - .fd-home .card .icon-badge svg{
185 - width:28px;
186 - height:28px;
187 - stroke:var(--fd-navy);
188 - fill:none;
189 - stroke-width:1.8;
190 - stroke-linecap:round;
191 - stroke-linejoin:round;
218 + .fdm-badge svg .accent { stroke: var(--fd-blue-bright); }
219 + .fdm-body {
220 + padding: 38px 22px 22px;
221 + display: flex;
222 + flex-direction: column;
223 + flex: 1 1 auto;
192 192   }
193 - .fd-home .card .icon-badge svg .fill-accent{
194 - fill:var(--fd-sky);
195 - stroke:none;
225 + .fdm-title {
226 + display: block;
227 + font-size: 16.5px;
228 + font-weight: 800;
229 + line-height: 1.28;
230 + color: var(--fd-navy);
196 196   }
197 - .fd-home .card h2{
198 - color:var(--fd-navy);
199 - font-weight:800;
200 - font-size:1.25rem;
201 - margin:0 0 8px;
202 - letter-spacing:-0.005em;
232 + .fdm-sub {
233 + display: block;
234 + font-size: 13.5px;
235 + font-weight: 300;
236 + line-height: 1.55;
237 + color: var(--fd-body);
238 + margin-top: 5px;
203 203   }
204 - .fd-home .card p{
205 - color:var(--fd-slate);
206 - font-weight:300;
207 - font-size:.92rem;
208 - margin:0 0 20px;
209 - flex-grow:1;
240 + .fdm-cta {
241 + display: flex;
242 + align-items: center;
243 + gap: 7px;
244 + margin-top: auto;
245 + padding-top: 16px;
246 + font-size: 13px;
247 + font-weight: 600;
248 + color: var(--fd-red);
210 210   }
211 - .fd-home .card .card-cta{
212 - display:inline-flex;
213 - align-items:center;
214 - gap:6px;
215 - color:var(--fd-blue);
216 - font-weight:700;
217 - font-size:.85rem;
218 - text-transform:uppercase;
219 - letter-spacing:.03em;
250 + .fdm-cta svg {
251 + width: 15px; height: 15px;
252 + fill: none;
253 + stroke: var(--fd-red);
254 + stroke-width: 2;
255 + stroke-linecap: round;
256 + stroke-linejoin: round;
257 + transition: transform .2s ease;
220 220   }
221 - .fd-home .card .card-cta svg{
222 - width:14px;
223 - height:14px;
224 - stroke:var(--fd-blue);
225 - fill:none;
226 - stroke-width:2.2;
227 - transition:transform .18s ease;
259 + .fdm-card:hover .fdm-cta svg { transform: translateX(4px); }
260 + /* ---- Footer ---- */
261 + .fdm-footer {
262 + margin-top: 32px;
263 + padding-top: 18px;
264 + border-top: 1px solid var(--fd-bg-mid);
265 + display: flex;
266 + justify-content: center;
267 + align-items: center;
268 + flex-wrap: wrap;
269 + gap: 14px;
270 + font-size: 13px;
228 228   }
229 - .fd-home .card:hover .card-cta svg{ transform:translateX(3px); }
230 -
231 - .fd-home footer{
232 - max-width:var(--fd-max-w);
233 - margin:0 auto;
234 - padding:32px 32px 48px;
235 - display:flex;
236 - align-items:center;
237 - gap:12px;
238 - color:var(--fd-grey);
239 - font-size:.8rem;
240 - border-top:1px solid var(--fd-lightgrey);
241 - margin-top:24px;
272 + .fdm-footer a {
273 + font-weight: 600;
274 + text-decoration: none !important;
275 + color: var(--fd-blue);
242 242   }
243 - .fd-home footer img{ height:18px; opacity:.8; }
244 -
245 - @media (max-width:820px){
246 - .fd-home .card-grid{ grid-template-columns:1fr; }
247 - .fd-home .hero h1{ font-size:2rem; }
248 - .fd-home main{ padding:40px 20px 8px; }
249 - .fd-home .hero{ padding:44px 20px 56px; }
277 + .fdm-footer a:hover { text-decoration: underline !important; }
278 + .fdm-footer a:focus-visible {
279 + outline: 2px solid var(--fd-blue-bright);
280 + outline-offset: 3px;
250 250   }
282 + .fdm-brand-first { color: var(--fd-blue); }
283 + .fdm-brand-second { color: var(--fd-navy); }
284 + .fdm-azure { color: var(--ms-azure); }
285 + .fdm-divider { color: var(--fd-bg-mid); font-weight: 300; }
286 + @media (max-width: 768px) {
287 + .fdm-grid { grid-template-columns: 1fr; }
288 + .fdm-hub { padding: 0 12px 22px; }
289 + .fdm-masthead img { height: 38px; }
290 + .fdm-hero { min-height: 220px; }
291 + .fdm-hero-inner { padding: 24px 22px 22px; }
292 + }
293 + @media (prefers-reduced-motion: reduce) {
294 + .fdm-card, .fdm-cta svg { transition: none; }
295 + }
251 251  </style>
252 -
253 -<div class="fd-home">
254 -
255 - <div class="hero">
256 - <svg class="wave" viewBox="0 0 800 500" preserveAspectRatio="xMaxYMin slice" xmlns="http://www.w3.org/2000/svg">
257 - <path d="M800,0 C620,40 560,140 620,220 C680,300 800,300 800,300 Z" fill="#307ab2" opacity="0.35"/>
258 - <path d="M800,0 C650,60 610,170 690,250 C760,320 800,320 800,320 Z" fill="#38b2e3" opacity="0.5"/>
259 - <path d="M800,40 C700,90 680,180 750,240 C790,275 800,280 800,280 Z" fill="#38b2e3" opacity="0.85"/>
260 - </svg>
261 - <div class="hero-inner">
262 - <img class="logo" src="data:image/png;base64,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" alt="FirstDigital">
263 - <p class="kicker">FirstDigital Wiki</p>
264 - <h1>Welcome Home</h1>
265 - <p class="sub">Your starting point for guides, policies, and support resources across Voice, Data, and Account services.</p>
266 - </div>
297 +<div class="fdm-hub">
298 + <div class="fdm-masthead">
299 + <img src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital">
300 + <span class="fdm-masthead-label">Fiber &middot; Internet &middot; Cloud &middot; Voice</span>
267 267   </div>
268 -
269 - <div class="utility-strip">
270 - <p>Looking for something specific? Use the search bar above, or jump into one of the sections below.</p>
271 - </div>
272 -
273 - <main>
274 - <p class="section-label">Browse by Service</p>
275 - <hr class="section-rule">
276 -
277 - <div class="card-grid">
278 -
279 - <a class="card" href="https://learn.firstdigital.com/bin/view/FirstDigital%20Product%20Support/">
280 - <div class="icon-badge">
281 - <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
282 - <path d="M4 4.5c0-.6.4-1 1-1h2.4c.5 0 .9.3 1 .8l.8 3.2c.1.4 0 .9-.3 1.2l-1.5 1.5c1.1 2.3 3 4.2 5.3 5.3l1.5-1.5c.3-.3.8-.4 1.2-.3l3.2.8c.5.1.8.5.8 1V19c0 .6-.4 1-1 1h-1.5C9.4 20 4 14.6 4 8V4.5Z"/>
283 - </svg>
284 - </div>
285 - <h2>Voice Services</h2>
286 - <p>Hosted voice, unified communications, calling features, and CNAM/caller ID guidance.</p>
287 - <span class="card-cta">View guides
288 - <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
289 - </span>
290 - </a>
291 -
292 - <a class="card" href="REPLACE_WITH_DATA_SERVICES_LINK">
293 - <div class="icon-badge">
294 - <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
295 - <rect x="4" y="4" width="16" height="5" rx="1.2"/>
296 - <rect x="4" y="14" width="16" height="5" rx="1.2"/>
297 - <circle class="fill-accent" cx="7.5" cy="6.5" r="1"/>
298 - <circle class="fill-accent" cx="7.5" cy="16.5" r="1"/>
299 - </svg>
300 - </div>
301 - <h2>Data Services</h2>
302 - <p>Fiber internet, Ethernet, dedicated connectivity, and network reliability resources.</p>
303 - <span class="card-cta">View guides
304 - <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
305 - </span>
306 - </a>
307 -
308 - <a class="card" href="REPLACE_WITH_ACCOUNT_SERVICES_LINK">
309 - <div class="icon-badge">
310 - <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
311 - <circle cx="12" cy="8" r="3.2"/>
312 - <path d="M5 19.5c0-3.6 3.1-6.2 7-6.2s7 2.6 7 6.2"/>
313 - </svg>
314 - </div>
315 - <h2>Account Services</h2>
316 - <p>Billing, support requests, account changes, and general customer service resources.</p>
317 - <span class="card-cta">View guides
318 - <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
319 - </span>
320 - </a>
321 -
302 + <section class="fdm-hero">
303 + <img class="fdm-hero-img" src="PASTE_YOUR_HERO_BASE64_HERE" alt="">
304 + <div class="fdm-hero-inner">
305 + <hr class="fdm-rule">
306 + <div class="fdm-eyebrow">Learning Center</div>
307 + <h1>Product Documentation</h1>
308 + <p>Guides, answers, and implementation resources for your FirstDigital voice services. Choose a product to get started.</p>
322 322   </div>
323 - </main>
324 -
310 + </section>
311 + <div class="fdm-grid">
312 + <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/CCP/">
313 + <span class="fdm-media">
314 + <img src="PASTE_YOUR_WEBEX_CARD_BASE64_HERE" alt="">
315 + <span class="fdm-badge"><img class="fdm-logo-webex" src="https://learn.firstdigital.com/bin/download/Main/WebHome/Webex-Symbol.png?rev=1.1" alt="Webex"></span>
316 + </span>
317 + <span class="fdm-body">
318 + <span class="fdm-title">Cloud Connected PSTN (CCP)</span>
319 + <span class="fdm-sub">Webex integration</span>
320 + <span class="fdm-cta">Open CCP docs <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
321 + </span>
322 + </a>
323 + <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Teams/">
324 + <span class="fdm-media">
325 + <img src="PASTE_YOUR_TEAMS_CARD_BASE64_HERE" alt="">
326 + <span class="fdm-badge"><img class="fdm-logo-teams" src="https://learn.firstdigital.com/bin/download/Main/WebHome/MS%20teams.webp?rev=1.1" alt="Microsoft Teams"></span>
327 + </span>
328 + <span class="fdm-body">
329 + <span class="fdm-title">Microsoft Teams</span>
330 + <span class="fdm-sub">Direct Routing</span>
331 + <span class="fdm-cta">Open Teams docs <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
332 + </span>
333 + </a>
334 + <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/SIP/">
335 + <span class="fdm-media">
336 + <img src="PASTE_YOUR_SIP_CARD_BASE64_HERE" alt="">
337 + <span class="fdm-badge"><img class="fdm-logo-firstdigital" src="https://learn.firstdigital.com/bin/download/Main/WebHome/FirstDigital-Logo.png?rev=1.3" alt="FirstDigital"></span>
338 + </span>
339 + <span class="fdm-body">
340 + <span class="fdm-title">FirstDigital SIP Trunk</span>
341 + <span class="fdm-sub">Voice connectivity</span>
342 + <span class="fdm-cta">Open SIP docs <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
343 + </span>
344 + </a>
345 + <a class="fdm-card" href="https://learn.firstdigital.com/bin/view/Support/">
346 + <span class="fdm-media">
347 + <img src="PASTE_YOUR_SUPPORT_CARD_BASE64_HERE" alt="">
348 + <span class="fdm-badge"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path class="accent" d="M9.2 9.3a3 3 0 0 1 5.6 1c0 1.9-2.8 2.4-2.8 4M12 17.4v.01"/></svg></span>
349 + </span>
350 + <span class="fdm-body">
351 + <span class="fdm-title">Support</span>
352 + <span class="fdm-sub">Resources and contact information</span>
353 + <span class="fdm-cta">Get support <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
354 + </span>
355 + </a>
356 + </div>
325 325   <div class="fdm-footer">
326 326   <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true"><span class="fdm-brand-first">First</span><span class="fdm-brand-second">Digital</span></a>
327 327   <span class="fdm-divider">|</span>