165 lines
9.0 KiB
HTML
165 lines
9.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<link rel="canonical" href="/patterns/example1/">
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="/css/prism.css" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||
|
|
<title>
|
||
|
|
|
||
|
|
Collapsible region | Inclusive Pattern Docs
|
||
|
|
|
||
|
|
</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<svg style="display: none">
|
||
|
|
<symbol id="bookmark">
|
||
|
|
<g transform="translate(2266 3206.2)">
|
||
|
|
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||
|
|
</g>
|
||
|
|
</symbol>
|
||
|
|
|
||
|
|
<symbol id="w3c">
|
||
|
|
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||
|
|
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||
|
|
</symbol>
|
||
|
|
|
||
|
|
<symbol id="tag">
|
||
|
|
<g transform="translate(0 -875.2)">
|
||
|
|
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||
|
|
</g>
|
||
|
|
</symbol>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<div class="wrapper">
|
||
|
|
<header class="intro-and-nav" role="banner">
|
||
|
|
<div>
|
||
|
|
<div class="intro">
|
||
|
|
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||
|
|
<img src="/images/logo.png" alt="">
|
||
|
|
</a>
|
||
|
|
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||
|
|
</div>
|
||
|
|
<nav class="patterns" role="navigation">
|
||
|
|
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/example1/" aria-current="page">
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Collapsible region</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/example2/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Tab interface</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<h3>Landmarks</h3>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/landmarks/example2/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Footer</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/landmarks/example-one/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Page region navigation landmark</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<h3>Widgets</h3>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/widgets/example1/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Card</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/widgets/example2/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Menu button and menu</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="main-and-footer">
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<main id="main">
|
||
|
|
<h1>Collapsible region</h1>
|
||
|
|
|
||
|
|
<div class="tags">
|
||
|
|
<strong aria-hidden="true">Tags: </strong>
|
||
|
|
<ul aria-label="tags">
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||
|
|
<use xlink:href="#tag"></use>
|
||
|
|
</svg>
|
||
|
|
<a href="/tags/animated">animated</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<svg class="tag" aria-hidden="true" height="50" width="50" viewBox="0 0 177.16535 177.16535">
|
||
|
|
<use xlink:href="#tag"></use>
|
||
|
|
</svg>
|
||
|
|
<a href="/tags/forms">forms</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Nulla auctor eleifend turpis consequat pharetra: Cras molestie risus a enim convallis vitae luctus libero lacinia. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Nulla auctor eleifend turpis consequat pharetra. Sed mauris arcu, aliquet ultrices malesuada sed, pretium id <kbd>CTRL</kbd> + <kbd>V</kbd> massa. Fusce ac sodales magna. </p>
|
||
|
|
|
||
|
|
<p>Nulla auctor eleifend turpis consequat pharetra: Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris). Maecenas sit amet tellus nec mi gravida posuere non pretium magna. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Vestibulum <code>text-align : justify</code> lacus. Donec et nisi dictum felis sollicitudin congue. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. </p>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer role="contentinfo">
|
||
|
|
By Heydon Pickering
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/js/prism.js"></script>
|
||
|
|
|
||
|
|
<script src="/js/dom-scripts.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|