Skip to content

Commit 6849993

Browse files
wibjornwibjorn
authored
update site header bg atomic class in example card in featured section (#851)
1 parent a2f1537 commit 6849993

2 files changed

Lines changed: 21 additions & 16 deletions

File tree

‎.changeset/real-pots-start.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@microsoft/atlas-site': minor
3+
---
4+
5+
Update docs for site-header to include the correct atomics for background color for cards.

‎site/src/components/site-header.md‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ Below are the examples of both content options, with a set of links and a set of
126126
<div class="site-header-panel-content">
127127
<ul class="site-header-panel-cards">
128128
<li>
129-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
129+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
130130
<div class="card-content">
131131
<a href="#!" class="card-title color-text stretched-link">
132132
Card 1
@@ -138,7 +138,7 @@ Below are the examples of both content options, with a set of links and a set of
138138
</article>
139139
</li>
140140
<li>
141-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
141+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
142142
<div class="card-content">
143143
<a href="#!" class="card-title color-text stretched-link">
144144
Card 2
@@ -150,7 +150,7 @@ Below are the examples of both content options, with a set of links and a set of
150150
</article>
151151
</li>
152152
<li>
153-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
153+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
154154
<div class="card-content">
155155
<a href="#!" class="card-title color-text stretched-link">
156156
Card 3
@@ -162,7 +162,7 @@ Below are the examples of both content options, with a set of links and a set of
162162
</article>
163163
</li>
164164
<li>
165-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
165+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
166166
<div class="card-content">
167167
<a href="#!" class="card-title color-text stretched-link">
168168
Card 4
@@ -174,7 +174,7 @@ Below are the examples of both content options, with a set of links and a set of
174174
</article>
175175
</li>
176176
<li>
177-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
177+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
178178
<div class="card-content">
179179
<a href="#!" class="card-title color-text stretched-link">
180180
Card 5
@@ -186,7 +186,7 @@ Below are the examples of both content options, with a set of links and a set of
186186
</article>
187187
</li>
188188
<li>
189-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
189+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
190190
<div class="card-content">
191191
<a href="#!" class="card-title color-text stretched-link">
192192
Card 6
@@ -198,7 +198,7 @@ Below are the examples of both content options, with a set of links and a set of
198198
</article>
199199
</li>
200200
<li>
201-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
201+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
202202
<div class="card-content">
203203
<a href="#!" class="card-title color-text stretched-link">
204204
Card 7
@@ -210,7 +210,7 @@ Below are the examples of both content options, with a set of links and a set of
210210
</article>
211211
</li>
212212
<li>
213-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
213+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
214214
<div class="card-content">
215215
<a href="#!" class="card-title color-text stretched-link">
216216
Card 8
@@ -222,7 +222,7 @@ Below are the examples of both content options, with a set of links and a set of
222222
</article>
223223
</li>
224224
<li>
225-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
225+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
226226
<div class="card-content">
227227
<a href="#!" class="card-title color-text stretched-link">
228228
Card 9
@@ -236,7 +236,7 @@ Below are the examples of both content options, with a set of links and a set of
236236
</ul>
237237
</div>
238238
<section class="site-header-panel-featured-content">
239-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
239+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
240240
<div class="card-content">
241241
<p class="card-supertitle">Supertitle</p>
242242
<a href="#!" class="card-title color-text stretched-link">
@@ -247,7 +247,7 @@ Below are the examples of both content options, with a set of links and a set of
247247
</p>
248248
</div>
249249
</article>
250-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
250+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
251251
<div class="card-content">
252252
<p class="card-supertitle">Supertitle</p>
253253
<a href="#!" class="card-title color-text stretched-link">
@@ -272,7 +272,7 @@ Below are the examples of both content options, with a set of links and a set of
272272
<!-- 9 cards max -->
273273
<ul class="site-header-panel-cards">
274274
<li>
275-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
275+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
276276
<div class="card-content">
277277
<a href="#!" class="card-title color-text stretched-link">
278278
Card 1
@@ -290,7 +290,7 @@ Below are the examples of both content options, with a set of links and a set of
290290
<!-- Featured content -->
291291
<!-- 2 cards max -->
292292
<section class="site-header-panel-featured-content">
293-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
293+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
294294
<div class="card-content">
295295
<p class="card-supertitle">Supertitle</p>
296296
<a href="#!" class="card-title color-text stretched-link">
@@ -425,7 +425,7 @@ Below are the examples of both content options, with a set of links and a set of
425425
</a>
426426
</div>
427427
<section class="site-header-panel-featured-content">
428-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
428+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
429429
<div class="card-content">
430430
<p class="card-supertitle">Supertitle</p>
431431
<a href="#!" class="card-title color-text stretched-link">
@@ -436,7 +436,7 @@ Below are the examples of both content options, with a set of links and a set of
436436
</p>
437437
</div>
438438
</article>
439-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
439+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
440440
<div class="card-content">
441441
<p class="card-supertitle">Supertitle</p>
442442
<a href="#!" class="card-title color-text stretched-link">
@@ -477,7 +477,7 @@ Below are the examples of both content options, with a set of links and a set of
477477
<!-- Featured content -->
478478
<!-- 2 cards max -->
479479
<section class="site-header-panel-featured-content">
480-
<article class="card position-relative background-color-body-accent-onhover background-color-body-medium box-shadow-none">
480+
<article class="card position-relative background-color-body-accent-onhover background-color-body-dark box-shadow-none">
481481
<div class="card-content">
482482
<p class="card-supertitle">Supertitle</p>
483483
<a href="#!" class="card-title color-text stretched-link">

0 commit comments

Comments
 (0)