146 lines
8.6 KiB
HTML
146 lines
8.6 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/widgets/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>
|
||
|
|
|
||
|
|
Card | 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/" >
|
||
|
|
<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/" 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>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>Card</h1>
|
||
|
|
|
||
|
|
<p>Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Maecenas sit amet tellus – nec mi gravida posuere non pretium magna. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Nulla lobortis tempus commodo. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. </p>
|
||
|
|
|
||
|
|
<p>Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Donec et nisi dictum felis sollicitudin congue. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Aliquam tincidunt velit sit amet ante hendrerit tempus. </p>
|
||
|
|
|
||
|
|
<p>Aliquam tincidunt velit sit (amet ante hendrerit tempus). Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Aliquam tincidunt velit sit amet ante hendrerit tempus. Curabitur consectetur faucibus nisl ac varius. Donec et nisi dictum felis, sollicitudin, congue Heydon™. Nulla auctor eleifend turpis consequat pharetra. Donec et nisi dictum <a href='#'>felis sollicitudin</a> congue. </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>
|