<commit_before><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Components: Accordions | Pati Montero's design system </title>
        <meta name="description" content="Accordions are collapsible components. They allow a selective display of content while reducing irrelevant scrolling down.">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="css/styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap" rel="stylesheet">
        <link rel="icon" href="../images/pati-favicon.png" type="image/png">
        <meta name="google-site-verification" content="<KEY>" />
        <!-- Hotjar Tracking Code for https://www.patimontero.ca -->
        <script>
            (function(h,o,t,j,a,r){
                h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
                h._hjSettings={hjid:1006317,hjsv:6};
                a=o.getElementsByTagName('head')[0];
                r=o.createElement('script');r.async=1;
                r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
                a.appendChild(r);
            })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
        </script>
    </head>
    <body>
        <a href="#main-content" class="skip">Skip to content</a>
        <header class="header">
            <nav class="nav-main">
                <ul>
                    <li>
                        <a title="PatiMontero.ca" href="../index.html">
                            <svg aria-label="<NAME>" class="logo" width="122" hight="75" viewbox="0 0 122 75" xmlns="http://www.w3.org/2000/svg">
                                <g><path d="M112.1 45V18.8l-.8-.3-13.2 4.4V24c2 0 2 2.5 2 4.4v16.8c0 1.4.9 2.8 1.2 4.1-2.7 2.3-8.2 1.6-8.2-4.3V15.6c1-1.5 4.6-6.4 6.8-6.4 0 3.2 3.1 6.2 6.7 6.2 3.9 0 7-3.1 7-7.1 0-3.9-3-7.1-7-7.1-7.6 0-11.5 8.2-13.5 10.6V.9h-6c0 4-9 12.5-12 12.5v1.5h5v30.2c0 2 0 3.9.6 5.5-1.2.6-6.6 3-6.6-3.3V29.9c0-2.1.5-11.8-14.5-11.8 0 0-15.1-.9-15.1 8.6 0 4.6 3.5 5.5 5.7 5.5 1.8 0 5.4-1.1 5.4-5.5 0-2.9-1.7-4.2-1.7-4.2s1.3-2.2 4.5-2.2 4.7 1.8 4.7 5.2V35s-19.7-1.6-19.7 11.4c0 5.4 4.1 9.7 9.9 9.7 7.3 0 10.8-4.6 10.8-4.6s1.7 4.6 8 4.6c4.5 0 8.5-3.1 9.8-4.2 1.5 2.5 4.1 4.2 8 4.2 5.7 0 10.6-3.8 12.2-5.2 1.2 3.1 3.7 5.2 8.1 5.2 6.9 0 11.7-6 11.7-6l-.8-1c-2.6 2.8-9 1.9-9-4.1zm-49 5.2s-7.7 4.1-7.7-4.9c0-8.5 7.7-7.8 7.7-7.8v12.7zM27.8 18.2c-7.3 0-11.9 6.8-11.9 6.8h.2v-7h-.7L.1 22.5l.6.8c1.6 0 3.4 2.2 3.4 5v46.6h12v-19s2.4.9 7.1.9c14.7 0 18.3-11.3 18.3-21.1-.1-9.7-6.3-17.5-13.7-17.5zm-5.7 36c-4.5 0-6-5.2-6-8.1V27.6s2-1.9 5.1-1.9c2.5 0 8.1 2.5 8.1 12.6s-2.7 15.9-7.2 15.9z"/></g>
                            </svg>
                        </a>
                    </li>
                    <li><a href="index.html">Brand</a></li>
                    <li><a href="style.html">Style</a></li>
                    <li><a class="current" href="components-buttons.html">Components</a></li>
                </ul>
            </nav>
        </header>
        <article class="content components">
            <section class="content-wrapped">
                <h1 class="heading">Components: Accordions</h1>
                <p class="tagline">A wee design system's library</p>
                <p class="subtle"><time datetime="2020-05-13">Last updated on May 13, 2020&mdash;In progress</time></p>
                <hr class="intro-hr">
            </section>
            <aside>
                <nav class="nav-aside">
                    <ul>
                        <li><a class="current" href="components-accordion.html">Accordions</a><span class="upcoming">&mdash;In progress</span></li>
                        <li><a href="components-buttons.html">Buttons</a></li>
                        <li><a href="components-links.html">Links</a></li>
                        <li><a href="components-navigation.html">Navigation</a></li>
                        <li><a href="components-texts.html">Texts</a></li>
                    </ul>
                </nav>
            </aside>
            <section class="content-wrapped">
                <h2 id="main-content" class="heading xtarget">Accordions <a href="#main.content">#</a></h2>
                <p class="intro">Accordions are collapsible components. They allow a progressive display of content while reducing irrelevant scrolling down.</p>
                <h3 class="heading">Guidelines</h3>
                <ul>
                    <li>Accordions showcase headlines as a reference for their hidden content. They must be short enough to prevent text wrapping.</li>
                    <li>Accordions must be inclusive. Users should be able to expand and collapse them with a keyboard or assistive technology.</li>
                    <li>Use sentence case for the headlines, which means that only the first word starts with a capital letter. Don't use a period in the end.</li>
                </ul>
                <h3 class="heading heading-button" tabindex="-1">
                    <span>Code snippets</span>
                    <button class="btn" data-expandall="">Expand all</button>
                </h3>

                <div class="component-container">
                    <div class="component-intro">
                        <h4 id="accordion">Accordions</h4>
                        <button data-expands="accordion-content" aria-label="open section" aria-describedby="accordion" aria-expanded="false">
                            <svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70 70">
                                <g transform="translate(0 -981.5)">
                                    <rect style="stroke-width:0;fill:#2f2f2f" ry="4" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut"></rect>
                                    <rect style="stroke-width:0;fill:#2f2f2f" ry="4" height="10" width="60" y="1012.4" x="5"></rect>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <div id="accordion-content" class="component-content" hidden="">
                        <p>Use <span class="subtle">dark</span> text (#f8f8f8) over a light-coloured area  or contrasting image. Make sure that you always provide an <a href="style.html#colour-combinations">accessible colour combination</a>.</p>
                        <p>Here are a few examples of proper usage:</p>
                        <div class="code-example bg--regular"><h1>Heading one</h1></div>
                        <div class="code-example bg--accent"><h2>Heading two</h1></div>
                        <div class="code-example bg--light-accent"><h3>Heading three</h1></div>
                        <div class="code-example bg--lightest-accent"><h4>Heading four</h1></div>
                        <div class="code-example"><h5>Heading five</h1></div>
                        <p>These are their code snippets:</p>
                        <pre>
                            <code>
                                <h5 class="heading heading-button">
                                    <span>HTML</span>
                                    <button class="btn-sec" aria-label="copy to clipboard"  data-clipboard-target="#html-accordion">Copy HTML</button>
                                </h5>
<span id="html-accordion">
&lt;h3 class="heading heading-button" tabindex="-1"&gt;
    &lt;span&gt;<span class="code-accent">Accordion heading</span>&lt;/span&gt;
    &lt;button class="btn" data-expandall=""&gt;<span class="code-accent">Expand all</span>&lt;/button&gt;
&lt;/h3&gt;
&lt;div class="component-container"&gt;
    &lt;div class="component-intro"&gt;
        &lt;h4 id="btn-primary"&gt;<span class="code-accent">Content heading</span>&lt;/h4&gt;
        &lt;button data-expands="btn-primary-content" aria-label="open section" aria-describedby="btn-primary" aria-expanded="false"&gt;
            &lt;svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70 70"&gt;
                &lt;g transform="translate(0 -981.5)"&gt;
                    &lt;rect style="stroke-width:0;fill:#2f2f2f" ry="4" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut"&gt;&lt;/rect&gt;
                    &lt;rect style="stroke-width:0;fill:#2f2f2f" ry="4" height="10" width="60" y="1012.4" x="5"&gt;&lt;/rect&gt;
                &lt;/g&gt;
            &lt;/svg&gt;
        &lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="btn-primary-content" class="component-content" hidden=""&gt;
        &lt;p&gt;<span class="code-accent">This is the content.</span>&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</span>
                                <h5 class="heading heading-button">
                                    <span>CSS</span>
                                    <button class="btn-sec" aria-label="copy to clipboard"  data-clipboard-target="#css-accordion">Copy CSS</button>
                                </h5>
<span id="css-accordion">
[hidden] {
    display: none;
    margin-top: 0;
}

/* button::-moz-focus-inner {
    border: 0;
} */
<commit_msg>Fixed ID for accordion (HTML code snippet).<commit_after><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Components: Accordions | Pati Montero's design system </title>
        <meta name="description" content="Accordions are collapsible components. They allow a selective display of content while reducing irrelevant scrolling down.">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="css/styles.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap" rel="stylesheet">
        <link rel="icon" href="../images/pati-favicon.png" type="image/png">
        <meta name="google-site-verification" content="3DZHbv83s9zAmGpNLDUsum7EZakdUf_r_DeuB01UdHo" />
        <!-- Hotjar Tracking Code for https://www.patimontero.ca -->
        <script>
            (function(h,o,t,j,a,r){
                h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
                h._hjSettings={hjid:1006317,hjsv:6};
                a=o.getElementsByTagName('head')[0];
                r=o.createElement('script');r.async=1;
                r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
                a.appendChild(r);
            })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
        </script>
    </head>
    <body>
        <a href="#main-content" class="skip">Skip to content</a>
        <header class="header">
            <nav class="nav-main">
                <ul>
                    <li>
                        <a title="PatiMontero.ca" href="../index.html">
                            <svg aria-label="<NAME>" class="logo" width="122" hight="75" viewbox="0 0 122 75" xmlns="http://www.w3.org/2000/svg">
                                <g><path d="M112.1 45V18.8l-.8-.3-13.2 4.4V24c2 0 2 2.5 2 4.4v16.8c0 1.4.9 2.8 1.2 4.1-2.7 2.3-8.2 1.6-8.2-4.3V15.6c1-1.5 4.6-6.4 6.8-6.4 0 3.2 3.1 6.2 6.7 6.2 3.9 0 7-3.1 7-7.1 0-3.9-3-7.1-7-7.1-7.6 0-11.5 8.2-13.5 10.6V.9h-6c0 4-9 12.5-12 12.5v1.5h5v30.2c0 2 0 3.9.6 5.5-1.2.6-6.6 3-6.6-3.3V29.9c0-2.1.5-11.8-14.5-11.8 0 0-15.1-.9-15.1 8.6 0 4.6 3.5 5.5 5.7 5.5 1.8 0 5.4-1.1 5.4-5.5 0-2.9-1.7-4.2-1.7-4.2s1.3-2.2 4.5-2.2 4.7 1.8 4.7 5.2V35s-19.7-1.6-19.7 11.4c0 5.4 4.1 9.7 9.9 9.7 7.3 0 10.8-4.6 10.8-4.6s1.7 4.6 8 4.6c4.5 0 8.5-3.1 9.8-4.2 1.5 2.5 4.1 4.2 8 4.2 5.7 0 10.6-3.8 12.2-5.2 1.2 3.1 3.7 5.2 8.1 5.2 6.9 0 11.7-6 11.7-6l-.8-1c-2.6 2.8-9 1.9-9-4.1zm-49 5.2s-7.7 4.1-7.7-4.9c0-8.5 7.7-7.8 7.7-7.8v12.7zM27.8 18.2c-7.3 0-11.9 6.8-11.9 6.8h.2v-7h-.7L.1 22.5l.6.8c1.6 0 3.4 2.2 3.4 5v46.6h12v-19s2.4.9 7.1.9c14.7 0 18.3-11.3 18.3-21.1-.1-9.7-6.3-17.5-13.7-17.5zm-5.7 36c-4.5 0-6-5.2-6-8.1V27.6s2-1.9 5.1-1.9c2.5 0 8.1 2.5 8.1 12.6s-2.7 15.9-7.2 15.9z"/></g>
                            </svg>
                        </a>
                    </li>
                    <li><a href="index.html">Brand</a></li>
                    <li><a href="style.html">Style</a></li>
                    <li><a class="current" href="components-buttons.html">Components</a></li>
                </ul>
            </nav>
        </header>
        <article class="content components">
            <section class="content-wrapped">
                <h1 class="heading">Components: Accordions</h1>
                <p class="tagline">A wee design system's library</p>
                <p class="subtle"><time datetime="2020-05-13">Last updated on May 13, 2020&mdash;In progress</time></p>
                <hr class="intro-hr">
            </section>
            <aside>
                <nav class="nav-aside">
                    <ul>
                        <li><a class="current" href="components-accordion.html">Accordions</a><span class="upcoming">&mdash;In progress</span></li>
                        <li><a href="components-buttons.html">Buttons</a></li>
                        <li><a href="components-links.html">Links</a></li>
                        <li><a href="components-navigation.html">Navigation</a></li>
                        <li><a href="components-texts.html">Texts</a></li>
                    </ul>
                </nav>
            </aside>
            <section class="content-wrapped">
                <h2 id="main-content" class="heading xtarget">Accordions <a href="#main.content">#</a></h2>
                <p class="intro">Accordions are collapsible components. They allow a progressive display of content while reducing irrelevant scrolling down.</p>
                <h3 class="heading">Guidelines</h3>
                <ul>
                    <li>Accordions showcase headlines as a reference for their hidden content. They must be short enough to prevent text wrapping.</li>
                    <li>Accordions must be inclusive. Users should be able to expand and collapse them with a keyboard or assistive technology.</li>
                    <li>Use sentence case for the headlines, which means that only the first word starts with a capital letter. Don't use a period in the end.</li>
                </ul>
                <h3 class="heading heading-button" tabindex="-1">
                    <span>Code snippets</span>
                    <button class="btn" data-expandall="">Expand all</button>
                </h3>

                <div class="component-container">
                    <div class="component-intro">
                        <h4 id="accordion">Accordions</h4>
                        <button data-expands="accordion-content" aria-label="open section" aria-describedby="accordion" aria-expanded="false">
                            <svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70 70">
                                <g transform="translate(0 -981.5)">
                                    <rect style="stroke-width:0;fill:#2f2f2f" ry="4" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut"></rect>
                                    <rect style="stroke-width:0;fill:#2f2f2f" ry="4" height="10" width="60" y="1012.4" x="5"></rect>
                                </g>
                            </svg>
                        </button>
                    </div>
                    <div id="accordion-content" class="component-content" hidden="">
                        <p>Use <span class="subtle">dark</span> text (#f8f8f8) over a light-coloured area  or contrasting image. Make sure that you always provide an <a href="style.html#colour-combinations">accessible colour combination</a>.</p>
                        <p>Here are a few examples of proper usage:</p>
                        <div class="code-example bg--regular"><h1>Heading one</h1></div>
                        <div class="code-example bg--accent"><h2>Heading two</h1></div>
                        <div class="code-example bg--light-accent"><h3>Heading three</h1></div>
                        <div class="code-example bg--lightest-accent"><h4>Heading four</h1></div>
                        <div class="code-example"><h5>Heading five</h1></div>
                        <p>These are their code snippets:</p>
                        <pre>
                            <code>
                                <h5 class="heading heading-button">
                                    <span>HTML</span>
                                    <button class="btn-sec" aria-label="copy to clipboard"  data-clipboard-target="#html-accordion">Copy HTML</button>
                                </h5>
<span id="html-accordion">
&lt;h3 class="heading heading-button" tabindex="-1"&gt;
    &lt;span&gt;<span class="code-accent">Accordion heading</span>&lt;/span&gt;
    &lt;button class="btn" data-expandall=""&gt;<span class="code-accent">Expand all</span>&lt;/button&gt;
&lt;/h3&gt;
&lt;div class="component-container"&gt;
    &lt;div class="component-intro"&gt;
        &lt;h4 id="accdn-xmpl"&gt;<span class="code-accent">Content heading</span>&lt;/h4&gt;
        &lt;button data-expands="accdn-xmpl-content" aria-label="open section" aria-describedby="accdn-xmpl" aria-expanded="false"&gt;
            &lt;svg focusable="false" height="20mm" width="20mm" viewBox="0 0 70 70"&gt;
                &lt;g transform="translate(0 -981.5)"&gt;
                    &lt;rect style="stroke-width:0;fill:#2f2f2f" ry="4" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut"&gt;&lt;/rect&gt;
                    &lt;rect style="stroke-width:0;fill:#2f2f2f" ry="4" height="10" width="60" y="1012.4" x="5"&gt;&lt;/rect&gt;
                &lt;/g&gt;
            &lt;/svg&gt;
        &lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="accdn-xmpl-content" class="component-content" hidden=""&gt;
        &lt;p&gt;<span class="code-accent">This is the content.</span>&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</span>
                                <h5 class="heading heading-button">
                                    <span>CSS</span>
                                    <button class="btn-sec" aria-label="copy to clipboard"  data-clipboard-target="#css-accordion">Copy CSS</button>
                                </h5>
<span id="css-accordion">
[hidden] {
    display: none;
    margin-top: 0;
}

/* button::-moz-focus-inner {
    border: 0;
} */

{'fraction_non_alphanumeric': 0.17517653449212384, 'fraction_numerical': 0.0734926670287887, 'mean_word_length': 1.8065548780487806, 'pattern_counts': {'":': 0, '<': 368, '<?xml version=': 0, '>': 368, 'https://': 6, 'lorem ipsum': 0, 'www.': 4, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 18, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '398766', 'n_tokens_mistral': 7093, 'n_tokens_neox': 6322, 'n_words': 1180}