From 9b489ba857fe8d79cb1495e4f557ec6be3e9b1f4 Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 29 Sep 2020 13:15:05 +0700 Subject: [PATCH] Docs: Add tables --- docs/css/pico.docs.css | 6 +- docs/css/pico.docs.min.css | 2 +- docs/index.html | 144 +++++++++++++++++++++++++-- docs/scss/layout/_documentation.scss | 6 +- 4 files changed, 148 insertions(+), 10 deletions(-) diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index 62f247d5..1dfd6de3 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -273,7 +273,7 @@ main > aside details[open] summary { #grids button svg { stroke: var(--secondary); margin-right: .5rem; - border: 3px solid currentColor; + border: 2px solid currentColor; border-radius: 1rem; background: currentColor; } @@ -288,6 +288,10 @@ main > aside details[open] summary { margin-top: calc(var(--spacing-typography) * 2); } +#grids details svg { + vertical-align: bottom; +} + #forms div.grid { grid-row-gap: 0; } diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index 00d4055c..7c6dd724 100644 --- a/docs/css/pico.docs.min.css +++ b/docs/css/pico.docs.min.css @@ -1,3 +1,3 @@ /*! * Pico: Customs styles for Docs - */:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-check-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:calc(1rem * var(--spacing-factor-xs) + 3.5rem)}@media (min-width:576px){body>main{padding-top:calc(1rem * var(--spacing-factor-sm) + 3.5rem)}}@media (min-width:768px){body>main{padding-top:calc(1rem * var(--spacing-factor-md) + 3.5rem)}}@media (min-width:992px){body>main{grid-column-gap:calc(var(--spacing-gutter) * 4);display:grid;grid-template-columns:200px auto;padding-top:calc(1rem * var(--spacing-factor-lg) + 3.5rem)}}@media (min-width:1200px){body>main{padding-top:calc(1rem * var(--spacing-factor-xl) + 3.5rem)}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:calc(1rem * var(--spacing-factor-xs) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xs) - 3.5rem);content:''}@media (min-width:576px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-sm) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-sm) - 3.5rem)}}@media (min-width:768px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-md) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-md) - 3.5rem)}}@media (min-width:992px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-lg) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-lg) - 3.5rem)}}@media (min-width:1200px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-xl) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xl) - 3.5rem)}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}main>aside nav{width:100%;margin-bottom:var(--spacing-block)}main>aside nav h1{margin-bottom:var(--spacing-typography)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:var(--block-round);border-top-left-radius:var(--block-round)}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:var(--icon-check);background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:calc(var(--spacing-typography) / 2)}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing-gutter) / 2) 0;background:var(--code-background);text-align:center}#grids details{margin-top:calc(var(--spacing-typography) * 2)}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--spacing-typography) * 2)}a[role=button]{margin-right:calc(var(--spacing-typography) / 4);margin-bottom:var(--spacing-typography)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:var(--spacing-gutter);right:var(--spacing-gutter)}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav a svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing-gutter) * -1);padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing-gutter);color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing-gutter) / 2);bottom:var(--spacing-gutter);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-shadow);line-height:1;text-align:right}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);transition:max-width var(--transition), padding var(--transition)}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing-gutter)}} \ No newline at end of file + */:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-check-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:calc(1rem * var(--spacing-factor-xs) + 3.5rem)}@media (min-width:576px){body>main{padding-top:calc(1rem * var(--spacing-factor-sm) + 3.5rem)}}@media (min-width:768px){body>main{padding-top:calc(1rem * var(--spacing-factor-md) + 3.5rem)}}@media (min-width:992px){body>main{grid-column-gap:calc(var(--spacing-gutter) * 4);display:grid;grid-template-columns:200px auto;padding-top:calc(1rem * var(--spacing-factor-lg) + 3.5rem)}}@media (min-width:1200px){body>main{padding-top:calc(1rem * var(--spacing-factor-xl) + 3.5rem)}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:calc(1rem * var(--spacing-factor-xs) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xs) - 3.5rem);content:''}@media (min-width:576px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-sm) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-sm) - 3.5rem)}}@media (min-width:768px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-md) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-md) - 3.5rem)}}@media (min-width:992px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-lg) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-lg) - 3.5rem)}}@media (min-width:1200px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-xl) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xl) - 3.5rem)}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}main>aside nav{width:100%;margin-bottom:var(--spacing-block)}main>aside nav h1{margin-bottom:var(--spacing-typography)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:var(--block-round);border-top-left-radius:var(--block-round)}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:var(--icon-check);background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:calc(var(--spacing-typography) / 2)}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:2px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing-gutter) / 2) 0;background:var(--code-background);text-align:center}#grids details{margin-top:calc(var(--spacing-typography) * 2)}#grids details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--spacing-typography) * 2)}a[role=button]{margin-right:calc(var(--spacing-typography) / 4);margin-bottom:var(--spacing-typography)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:var(--spacing-gutter);right:var(--spacing-gutter)}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav a svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing-gutter) * -1);padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing-gutter);color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing-gutter) / 2);bottom:var(--spacing-gutter);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-shadow);line-height:1;text-align:right}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);transition:max-width var(--transition), padding var(--transition)}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing-gutter)}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 39ed415f..68aa8dc8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -68,6 +68,7 @@
  • Typography
  • Buttons
  • Forms
    • +
  • Tables
    • @@ -108,7 +109,7 @@ 
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">

    Install with NPM

    npm install @picocss/pico
    -

    Starter template:

    +

    Starter HTML template:

    <!doctype html>
 <html lang="en">
@@ -297,7 +298,7 @@
 
             
    Pico use the same breakpoints and viewports sizes as Bootstrap.
    
             
    
-              
+              
    
@@ -382,7 +383,7 @@
             
    Useful to have responsives <table>
    
-              
    
                 
                   
    
                     Device
             
             
    
+              
    
@@ -453,7 +454,7 @@
               
    All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.
    
-              
    
                 
                   
    
                     #
             
             
    
+              
    
@@ -532,15 +533,13 @@
               
    Heading 4
    Heading 5
    Heading 6
    
-              
    Paragraph
    <h1>Heading 1</h1>
 <h2>Heading 2</h2>
 <h3>Heading 3</h3>
 <h4>Heading 4</h4>
 <h5>Heading 5</h5>
-<h6>Heading 6</h6>
-<p>Paragraph</p>
    
+<h6>Heading 6</h6>
    Inside a <hgroup> all margin-bottom are collapsed and the :last-child is styled.
    
@@ -587,6 +586,23 @@
 <ahref="#"class="secondary">Secondary</a>
 <ahref="#"class="contrast">Contrast</a>
 
+            
+            
    Blockquote:
    
+            
    
+              
    
+                "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
+                
    
+                  - Phasellus eget lacinia
+                
    
+              
    
+
+
    <blockquote>
+  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
+  <footer>
+    <cite>- Phasellus eget lacinia</cite>
+  </footer>
+</blockquote>
    
+
             
    
 
@@ -785,6 +801,120 @@
             
    Advanced example with all form elements supported in Pico here.
    
 
+          
+          
    
+            
    
+              
    Tables
    
+              
    Default styles for tables without .classes
    
+            
    
+            
    
+              
    
                 
                   
    
                     Device
               
               
 
 
 
             
                 
           
           
    
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+              
    #HeadingHeadingHeadingHeadingHeading
    1CellCellCellCellCell
    2CellCellCellCellCell
    3CellCellCellCellCell
    
+            
    
+
+
    <table>
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">Heading<</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+</table>
    
+
+            
    role="grid" enable striped rows.
    
+            
    
+              
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+              
    #HeadingHeadingHeadingHeadingHeading
    1CellCellCellCellCell
    2CellCellCellCellCell
    3CellCellCellCellCell
    
+            
    
+
+
    <table role="grid">
+  ...
+</table>
    
+
+          
+
           
           
    
             
    
diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss
index 28b5b483..265b8d14 100644
--- a/docs/scss/layout/_documentation.scss
+++ b/docs/scss/layout/_documentation.scss
@@ -93,7 +93,7 @@
     svg {
       stroke: var(--secondary);
       margin-right: .5rem;
-      border: 3px solid currentColor;
+      border: 2px solid currentColor;
       border-radius: 1rem;
       background: currentColor;
     }
@@ -107,6 +107,10 @@
 
   details {
     margin-top: calc(var(--spacing-typography) * 2);
+
+    svg {
+      vertical-align: bottom;
+    }
   }
 }