deploy: 42ddcf4

404.html

@@ -987,7 +987,7 @@ <h1 class="mt-300 mb-400">
 
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>
 

en/coming-soon/index.html

@@ -1006,163 +1006,166 @@ <h1 id="coming-soon" class="mb-400">Coming soon</h1>
 
 
 
-<div class="bg-light my-500 p-400">
-  <gcds-grid tag="ul" columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" gap="400">
-
-      <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
-
-          <h3>Alert</h3>
-          <div class="flex-1 mt-150 pt-250 bt-sm">
-
-              <p class="mb-150 text-secondary">
-                <small><em>Other names: notification, feedback, notice, banner.</em></small>
-              </p>
-
-            <p class="mb-150">A message that draws attention to an important and time-sensitive change.</p>
-            <img src="/images/common/components/preview-alert.svg" alt="The alert component shows a light blue box with a dark blue border on the left side. Next to the border is an &quot;i&quot; in a circle representing an info icon and below two dark blue boxes representing text." />
-          </div>
+
+  <div class="bg-light my-500 p-400">
+    <gcds-grid tag="ul" columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" gap="400">
+
+        <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
 
-
-      </li>
-
-
-
-
-
-
-
-      <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
-
-          <h3>Data table</h3>
-          <div class="flex-1 mt-150 pt-250 bt-sm">
-
-              <p class="mb-150 text-secondary">
-                <small><em>Other names: table, data grid.</em></small>
-              </p>
+            <h3>Alert</h3>
+            <div class="flex-1 mt-150 pt-250 bt-sm">
+
+                <p class="mb-150 text-secondary">
+                  <small><em>Other names: notification, feedback, notice, banner.</em></small>
+                </p>
+
+              <p class="mb-150">A message that draws attention to an important and time-sensitive change.</p>
+              <img src="/images/common/components/preview-alert.svg" alt="The alert component shows a light blue box with a dark blue border on the left side. Next to the border is an &quot;i&quot; in a circle representing an info icon and below two dark blue boxes representing text." />
+            </div>
 
-            <p class="mb-150">A way to organize and display large amounts of data in rows and columns.</p>
-            <img src="/images/common/components/preview-data-table.svg" alt="The data table shows an outlined rectangle with many smaller rectangles inside it. At the top is one larger, light grey rectangle that goes across the entire table representing the table header. Below are smaller, darker grey rectangles representing the data within the table." />
-          </div>
 
-
-      </li>
-
-
-
-
-
-
-
-
-
-
-
-      <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
-
-          <h3>Heading</h3>
-          <div class="flex-1 mt-150 pt-250 bt-sm">
-
-              <p class="mb-150 text-secondary">
-                <small><em>Other names: title, section heading, subheading.</em></small>
-              </p>
+        </li>
+
+
+
+
+
+
+
+        <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
+
+            <h3>Data table</h3>
+            <div class="flex-1 mt-150 pt-250 bt-sm">
+
+                <p class="mb-150 text-secondary">
+                  <small><em>Other names: table, data grid.</em></small>
+                </p>
+
+              <p class="mb-150">A way to organize and display large amounts of data in rows and columns.</p>
+              <img src="/images/common/components/preview-data-table.svg" alt="The data table shows an outlined rectangle with many smaller rectangles inside it. At the top is one larger, light grey rectangle that goes across the entire table representing the table header. Below are smaller, darker grey rectangles representing the data within the table." />
+            </div>
 
-            <p class="mb-150">A title that structures content by creating levels of hierarchy that organize page content visually and mentally, using GCDS styles.</p>
-            <img src="/images/common/components/preview-heading.svg" alt="The heading component shows a highlighted dark blue box representing a heading and 3 smaller grey boxes below representing a text block." />
-          </div>
 
-
-      </li>
-
-
-      <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
-
-          <h3>Icon</h3>
-          <div class="flex-1 mt-150 pt-250 bt-sm">
+        </li>
+
+
+
+
+
+
+
+
+
+
+
+        <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
+
+            <h3>Heading</h3>
+            <div class="flex-1 mt-150 pt-250 bt-sm">
+
+                <p class="mb-150 text-secondary">
+                  <small><em>Other names: title, section heading, subheading.</em></small>
+                </p>
+
+              <p class="mb-150">A title that structures content by creating levels of hierarchy that organize page content visually and mentally, using GCDS styles.</p>
+              <img src="/images/common/components/preview-heading.svg" alt="The heading component shows a highlighted dark blue box representing a heading and 3 smaller grey boxes below representing a text block." />
+            </div>
 
-              <p class="mb-150 text-secondary">
-                <small><em>Other names: glyphs, graphic, symbol.</em></small>
-              </p>
+
+        </li>
+
+
+        <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
+
+            <h3>Icon</h3>
+            <div class="flex-1 mt-150 pt-250 bt-sm">
+
+                <p class="mb-150 text-secondary">
+                  <small><em>Other names: glyphs, graphic, symbol.</em></small>
+                </p>
+
+              <p class="mb-150">A visual cue to help users understand the context.</p>
+              <img src="/images/common/components/preview-icons.svg" alt="Icon component shows a green check mark icon, orange triangle with an exclamation icon, blue circle  with an i for information, and an arrow." />
+            </div>
 
-            <p class="mb-150">A visual cue to help users understand the context.</p>
-            <img src="/images/common/components/preview-icons.svg" alt="Icon component shows a green check mark icon, orange triangle with an exclamation icon, blue circle  with an i for information, and an arrow." />
-          </div>
 
-
-      </li>
-
-
-      <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
-
-          <h3>Image</h3>
-          <div class="flex-1 mt-150 pt-250 mb-250 pb-250 by-sm">
+        </li>
+
+
+        <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
+
+            <h3>Image</h3>
+            <div class="flex-1 mt-150 pt-250 mb-250 pb-250 by-sm">
+
+                <p class="mb-150 text-secondary">
+                  <small><em>Other names: picture, responsive image, figure, photo.</em></small>
+                </p>
+
+              <p class="mb-150">An element for displaying optimized responsive visual content.</p>
+              <img src="/images/common/components/preview-image.svg" alt="The image component shows a light grey rectangle with a dark grey circle in it, representing the sun and 2 dark grey triangles representing mountains." />
+            </div>
 
-              <p class="mb-150 text-secondary">
-                <small><em>Other names: picture, responsive image, figure, photo.</em></small>
-              </p>
+              <span class="font-caption bg-light-blue align-self-start px-150 py-50 b-radius-lg">
+                Experimental
+              </span>
 
-            <p class="mb-150">An element for displaying optimized responsive visual content.</p>
-            <img src="/images/common/components/preview-image.svg" alt="The image component shows a light grey rectangle with a dark grey circle in it, representing the sun and 2 dark grey triangles representing mountains." />
-          </div>
 
-            <span class="font-caption bg-light-blue align-self-start px-150 py-50 b-radius-lg">
-              Experimental
-            </span>
+        </li>
+
+
+
+
+
+
+        <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
 
-
-      </li>
-
-
-
-
-
-
-      <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
-
-          <h3>Screenreader content</h3>
-          <div class="flex-1 mt-150 pt-250 mb-250 pb-250 by-sm">
+            <h3>Screenreader content</h3>
+            <div class="flex-1 mt-150 pt-250 mb-250 pb-250 by-sm">
+
+                <p class="mb-150 text-secondary">
+                  <small><em>Other names: visually hidden, screen reader only, visibility.</em></small>
+                </p>
+
+              <p class="mb-150">Information that is accessible for assistive technologies like screen readers, but invisible for sighted users.</p>
+              <img src="/images/common/components/preview-screenreader-content.svg" alt="The screenreader content component shows a rectangle with a dotted border. Inside the rectangle is a crossed out eye icon in dark blue and 3 smaller light grey rectangles representing text." />
+            </div>
 
-              <p class="mb-150 text-secondary">
-                <small><em>Other names: visually hidden, screen reader only, visibility.</em></small>
-              </p>
+              <span class="font-caption bg-light-blue align-self-start px-150 py-50 b-radius-lg">
+                Experimental
+              </span>
 
-            <p class="mb-150">Information that is accessible for assistive technologies like screen readers, but invisible for sighted users.</p>
-            <img src="/images/common/components/preview-screenreader-content.svg" alt="The screenreader content component shows a rectangle with a dotted border. Inside the rectangle is a crossed out eye icon in dark blue and 3 smaller light grey rectangles representing text." />
-          </div>
 
-            <span class="font-caption bg-light-blue align-self-start px-150 py-50 b-radius-lg">
-              Experimental
-            </span>
+        </li>
+
+
+
+
+
+
+
+        <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
 
-
-      </li>
-
-
-
-
-
-
-
-      <li class="list-none bg-white d-flex flex-col p-400 component-preview-box">
-
-          <h3>Text</h3>
-          <div class="flex-1 mt-150 pt-250 bt-sm">
-
-              <p class="mb-150 text-secondary">
-                <small><em>Other names: text block, copy, caption, body text, paragraph.</em></small>
-              </p>
+            <h3>Text</h3>
+            <div class="flex-1 mt-150 pt-250 bt-sm">
+
+                <p class="mb-150 text-secondary">
+                  <small><em>Other names: text block, copy, caption, body text, paragraph.</em></small>
+                </p>
+
+              <p class="mb-150">A paragraph displaying non-heading content with matching GCDS styles to provide accessible text sizes and color contrast.</p>
+              <img src="/images/common/components/preview-text.svg" alt="The text component shows a larger grey box representing a heading and 3 smaller boxes below highlighted in dark blue representing a text block." />
+            </div>
 
-            <p class="mb-150">A paragraph displaying non-heading content with matching GCDS styles to provide accessible text sizes and color contrast.</p>
-            <img src="/images/common/components/preview-text.svg" alt="The text component shows a larger grey box representing a heading and 3 smaller boxes below highlighted in dark blue representing a text block." />
-          </div>
 
-
-      </li>
-
-
-
-
-    </gcds-grid>
-</div>
+        </li>
+
+
+
+
+      </gcds-grid>
+  </div>
+
+
 
 
 
@@ -1204,7 +1207,7 @@ <h2 class="mt-300 mb-400">
 </section>
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>
 

en/components/alert/code/index.html

@@ -1076,7 +1076,7 @@ <h2 class="mt-300 mb-400">
 
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>
 

en/components/alert/design/index.html

@@ -1076,7 +1076,7 @@ <h2 class="mt-300 mb-400">
 
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>
 

en/components/alert/index.html

@@ -1076,7 +1076,7 @@ <h2 class="mt-300 mb-400">
 
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>
 

en/components/breadcrumbs/code/index.html

@@ -1120,7 +1120,7 @@ <h2 class="mt-300 mb-400">
 
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>
 

en/components/breadcrumbs/design/index.html

@@ -1122,7 +1122,7 @@ <h2 class="mt-300 mb-400">
 
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>
 

en/components/breadcrumbs/index.html

@@ -1100,7 +1100,7 @@ <h2 class="mt-300 mb-400">
 
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>
 

en/components/button/code/index.html

@@ -1122,7 +1122,7 @@ <h2 class="mt-300 mb-400">
 
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>
 

en/components/button/design/index.html

@@ -1118,7 +1118,7 @@ <h2 class="mt-300 mb-400">
 
 
         <gcds-date-modified class="mb-400 font-caption">
-          2023-10-11
+          2023-10-12
         </gcds-date-modified>
       </main>