Skip to content

Commit a475cce

Browse files
coliffcoliff
committed
Reduce heading sizes and remove emphasis
Refactor feature example markup to tone down typography: replace several h3 headings from fs-3xl text-body-emphasis to fs-2xl, and remove text-body-emphasis from various h3/h4/h2 headings and icon container classes (icon-square). Changes are limited to site/src/assets/examples/features/index.astro and are purely presentational to align headings with updated style guidelines.
1 parent c461bd5 commit a475cce

1 file changed

Lines changed: 22 additions & 22 deletions

File tree

‎site/src/assets/examples/features/index.astro‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const extra_css = ['features.css']
6565
<div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
6666
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#collection"/></svg>
6767
</div>
68-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
68+
<h3 class="fs-2xl">Featured title</h3>
6969
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
7070
<a href="#" class="icon-link">
7171
Call to action
@@ -76,7 +76,7 @@ export const extra_css = ['features.css']
7676
<div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
7777
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#people-circle"/></svg>
7878
</div>
79-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
79+
<h3 class="fs-2xl">Featured title</h3>
8080
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
8181
<a href="#" class="icon-link">
8282
Call to action
@@ -87,7 +87,7 @@ export const extra_css = ['features.css']
8787
<div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
8888
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
8989
</div>
90-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
90+
<h3 class="fs-2xl">Featured title</h3>
9191
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
9292
<a href="#" class="icon-link">
9393
Call to action
@@ -103,35 +103,35 @@ export const extra_css = ['features.css']
103103
<h2 class="pb-2 border-bottom">Hanging icons</h2>
104104
<div class="row g-4 py-5 row-cols-1 lg:row-cols-3">
105105
<div class="col d-flex align-items-start">
106-
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
106+
<div class="icon-square bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
107107
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
108108
</div>
109109
<div>
110-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
110+
<h3 class="fs-2xl">Featured title</h3>
111111
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
112112
<a href="#" class="btn-solid theme-primary">
113113
Primary button
114114
</a>
115115
</div>
116116
</div>
117117
<div class="col d-flex align-items-start">
118-
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
118+
<div class="icon-square bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
119119
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#cpu-fill"/></svg>
120120
</div>
121121
<div>
122-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
122+
<h3 class="fs-2xl">Featured title</h3>
123123
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
124124
<a href="#" class="btn-solid theme-primary">
125125
Primary button
126126
</a>
127127
</div>
128128
</div>
129129
<div class="col d-flex align-items-start">
130-
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
130+
<div class="icon-square bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
131131
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#tools"/></svg>
132132
</div>
133133
<div>
134-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
134+
<h3 class="fs-2xl">Featured title</h3>
135135
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
136136
<a href="#" class="btn-solid theme-primary">
137137
Primary button
@@ -221,56 +221,56 @@ export const extra_css = ['features.css']
221221
<div class="col d-flex align-items-start">
222222
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#bootstrap"/></svg>
223223
<div>
224-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
224+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
225225
<p>Paragraph of text beneath the heading to explain the heading.</p>
226226
</div>
227227
</div>
228228
<div class="col d-flex align-items-start">
229229
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#cpu-fill"/></svg>
230230
<div>
231-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
231+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
232232
<p>Paragraph of text beneath the heading to explain the heading.</p>
233233
</div>
234234
</div>
235235
<div class="col d-flex align-items-start">
236236
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#calendar3"/></svg>
237237
<div>
238-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
238+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
239239
<p>Paragraph of text beneath the heading to explain the heading.</p>
240240
</div>
241241
</div>
242242
<div class="col d-flex align-items-start">
243243
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#home"/></svg>
244244
<div>
245-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
245+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
246246
<p>Paragraph of text beneath the heading to explain the heading.</p>
247247
</div>
248248
</div>
249249
<div class="col d-flex align-items-start">
250250
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#speedometer2"/></svg>
251251
<div>
252-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
252+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
253253
<p>Paragraph of text beneath the heading to explain the heading.</p>
254254
</div>
255255
</div>
256256
<div class="col d-flex align-items-start">
257257
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#toggles2"/></svg>
258258
<div>
259-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
259+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
260260
<p>Paragraph of text beneath the heading to explain the heading.</p>
261261
</div>
262262
</div>
263263
<div class="col d-flex align-items-start">
264264
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#geo-fill"/></svg>
265265
<div>
266-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
266+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
267267
<p>Paragraph of text beneath the heading to explain the heading.</p>
268268
</div>
269269
</div>
270270
<div class="col d-flex align-items-start">
271271
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#tools"/></svg>
272272
<div>
273-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
273+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
274274
<p>Paragraph of text beneath the heading to explain the heading.</p>
275275
</div>
276276
</div>
@@ -284,7 +284,7 @@ export const extra_css = ['features.css']
284284

285285
<div class="row row-cols-1 md:row-cols-2 md:align-items-center g-5 py-5">
286286
<div class="col d-flex flex-column align-items-start gap-2">
287-
<h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
287+
<h2 class="fw-bold">Left-aligned title explaining these awesome features</h2>
288288
<p class="fg-2">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
289289
<a href="#" class="btn-solid theme-primary btn-lg">Primary button</a>
290290
</div>
@@ -297,7 +297,7 @@ export const extra_css = ['features.css']
297297
<use href="#collection" />
298298
</svg>
299299
</div>
300-
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
300+
<h4 class="fw-semibold mb-0">Featured title</h4>
301301
<p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
302302
</div>
303303

@@ -307,7 +307,7 @@ export const extra_css = ['features.css']
307307
<use href="#gear-fill" />
308308
</svg>
309309
</div>
310-
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
310+
<h4 class="fw-semibold mb-0">Featured title</h4>
311311
<p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
312312
</div>
313313

@@ -317,7 +317,7 @@ export const extra_css = ['features.css']
317317
<use href="#speedometer" />
318318
</svg>
319319
</div>
320-
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
320+
<h4 class="fw-semibold mb-0">Featured title</h4>
321321
<p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
322322
</div>
323323

@@ -327,7 +327,7 @@ export const extra_css = ['features.css']
327327
<use href="#table" />
328328
</svg>
329329
</div>
330-
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
330+
<h4 class="fw-semibold mb-0">Featured title</h4>
331331
<p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
332332
</div>
333333
</div>

0 commit comments

Comments
 (0)