1<!doctype html><html class="pl-c-html" lang="en"><head><title id="title">Pattern Lab</title><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1,width=device-width,viewport-fit=cover"><meta name="theme-color" content="#ababab"><link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all"><link rel="prefetch" as="image" href="styleguide/images/pattern-lab-logo--on-dark.svg"><link rel="prefetch" as="image" href="styleguide/images/pattern-lab-logo--on-light.svg"></head><body class="pl-c-body"><pl-layout></pl-layout>
1<script type="text/x-handlebars-template" class="pl-js-panel-template-base"><!-- description, etc. --> 2{{#if descBlockExists }} 3 4<div 5 class="pl-c-pattern-info__panel pl-c-pattern-info__panel--info pl-js-pattern-info" 6> 7 {{#if isPatternView }} 8 <!-- extra info for modal view --> 9 <div class="pl-c-pattern-info__header"> 10 <ul class="pl-c-breadcrumb"> 11 {{#with patternBreadcrumb }} 12 13 <li class="pl-c-breadcrumb__item">{{ patternGroup }}</li> 14 15 {{#if patternSubgroup }} 16 <li class="pl-c-breadcrumb__item">{{ patternSubgroup }}</li> 17 {{/if }} {{/with }} 18 </ul> 19 <!--end pl-c-breadcrumb--> 20 21 <h2 class="pl-c-pattern-info__title"> 22 {{ patternName }} {{#if patternState }} 23 <span 24 class="pl-c-pattern-state pl-c-pattern-state--{{ patternState }}" 25 title="{{ patternState }}" 26 ></span> 27 {{/if }} 28 </h2> 29 <!--end pl-c-pattern-info__title--> 30 </div> 31 <!--end pl-c-pattern-info__header--> 32 {{/if }} {{#if patternDescExists }} 33 <div class="pl-c-pattern-info__description pl-c-text-passage"> 34 {{{ patternDesc }}} {{#if patternDescAdditions }} {{{ patternDescAdditions 35 }}} {{/if }} 36 </div> 37 <!--end pl-c-pattern-info__description--> 38 {{/if }} {{#if lineageExists }} 39 <p class="pl-c-lineage pl-js-lineage"> 40 The 41 <em>{{ patternName }}</em> 42 pattern contains the following patterns: {{#each lineage }} 43 <a 44 href="{{ lineagePath }}" 45 class="pl-c-lineage__link pl-js-lineage-link" 46 data-patternpartial="{{ lineagePattern }}" 47 > 48 {{ lineagePattern }} {{#if lineageState }}<span 49 class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" 50 title="{{ lineageState }}" 51 /> 52 {{/if }} 53 </a> 54 <!--end pl-c-lineage__link--> 55 {{#if hasComma }}, {{/if }} {{/each }} 56 </p> 57 <!--end pl-c-lineage--> 58 {{/if }} {{#if lineageRExists }} 59 <p class="pl-c-lineage"> 60 The 61 <em>{{ patternName }}</em> 62 pattern is included in the following patterns: {{#each lineageR }} 63 <a 64 href="{{ lineagePath }}" 65 class="pl-c-lineage__link pl-js-lineage-link" 66 data-patternpartial="{{ lineagePattern }}" 67 > 68 {{ lineagePattern }} {{#if lineageState }}<span 69 class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" 70 title="{{ lineageState }}" 71 /> 72 {{/if }} 73 </a> 74 <!--end pl-c-lineage__link--> 75 {{#if hasComma }}, {{/if }} {{/each }} 76 </p> 77 <!--end pl-c-lineage--> 78 {{/if }} {{#if annotationExists }} 79 <div class="pl-c-annotations pl-c-text-passage pl-js-annotations"> 80 <h2 class="pl-c-annotations__title">Annotations</h2> 81 <ol class="pl-c-annotations__list"> 82 {{#each annotations }} 83 <li class="pl-c-annotations__item"> 84 <h3 class="pl-c-annotations__item-title">{{ title }}</h3> 85 86 <div class="pl-c-annotations__item-body">{{{ comment }}}</div> 87 <!--end pl-c-annotations__item-body--> 88 </li> 89 <!--end pl-c-annotations__item--> 90 {{/each }} 91 </ol> 92 <!--end pl-c-annotations__list--> 93 </div> 94 <!--end pl-c-annotations--> 95 {{/if }} 96</div> 97<!--end pl-c-pattern-info__panel--> 98{{/if }} 99 100<div class="pl-c-pattern-info__panel pl-c-pattern-info__panel--code"> 101 <div id="pl-{{ patternPartial }}-tabs" class="pl-c-tabs pl-js-tabs"> 102 <div class="pl-c-tabs__header"> 103 <ul class="pl-c-tabs__list"> 104 {{#each panels }} 105 <li class="pl-c-tabs__list-item"> 106 <a 107 class="pl-c-tabs__link pl-js-tab-link" 108 href="#pl-{{ ../patternPartial }}-{{ id }}-panel" 109 id="pl-{{ ../patternPartial }}-{{ id }}-tab" 110 data-patternpartial="{{ ../patternPartial }}" 111 data-panelid="{{ id }}" 112 no-smooth-scroll 113 >{{ name }}</a 114 > 115 </li> 116 <!--end pl-c-tabs__list-item--> 117 {{/each }} 118 </ul> 119 <!--end pl-c-tabs__list--> 120 </div> 121 <!--end pl-c-tabs__header--> 122 123 <div id="pl-{{ patternPartial }}-panels" class="pl-c-tabs__content"> 124 {{#each panels }} 125 <div 126 id="pl-{{ ../patternPartial }}-{{ id }}-panel" 127 class="pl-c-tabs__panel pl-js-tab-panel" 128 > 129 <button 130 class="pl-c-code-copy-btn pl-js-code-copy-btn" 131 size="small" 132 data-clipboard-target="#pl-{{ ../patternPartial }}-{{ id }}-panel code" 133 type="button" 134 >
135 <span class="pl-c-code-copy-btn__icon-text">Copy</span> 136 <svg 137 viewbox="0 0 24 24" 138 width="20" 139 height="20" 140 class="pl-c-code-copy-btn__icon pl-c-code-copy-btn__icon--copy" 141 > 142 <title>copy icon</title> 143 <path 144 fill="currentColor" 145 d="M18.984 21v-14.016h-10.969v14.016h10.969zM18.984 5.016c1.078 0 2.016 0.891 2.016 1.969v14.016c0 1.078-0.938 2.016-2.016 2.016h-10.969c-1.078 0-2.016-0.938-2.016-2.016v-14.016c0-1.078 0.938-1.969 2.016-1.969h10.969zM15.984 0.984v2.016h-12v14.016h-1.969v-14.016c0-1.078 0.891-2.016 1.969-2.016h12z" 146 ></path> 147 </svg> 148 149 <svg 150 class="pl-c-code-copy-btn__icon pl-c-code-copy-btn__icon--paste" 151 viewbox="0 0 16 16" 152 width="20" 153 height="20" 154 > 155 <title>clipboard</title> 156 <path 157 fill="currentColor" 158 d="M14.5 2h-4.5c0-1.105-0.895-2-2-2s-2 0.895-2 2h-4.5c-0.276 0-0.5 0.224-0.5 0.5v13c0 0.276 0.224 0.5 0.5 0.5h13c0.276 0 0.5-0.224 0.5-0.5v-13c0-0.276-0.224-0.5-0.5-0.5zM8 1c0.552 0 1 0.448 1 1s-0.448 1-1 1c-0.552 0-1-0.448-1-1s0.448-1 1-1zM14 15h-12v-12h2v1.5c0 0.276 0.224 0.5 0.5 0.5h7c0.276 0 0.5-0.224 0.5-0.5v-1.5h2v12z" 159 ></path> 160 <path 161 fill="currentColor" 162 d="M7 13.414l-3.207-3.707 0.914-0.914 2.293 1.793 4.293-3.793 0.914 0.914z" 163 ></path> 164 </svg> 165 </button> 166 {{{ content }}} 167 </div> 168 <!--end pl-c-tabs__panel--> 169 {{/each }} 170 </div> 171 <!--end pl-c-tabs__content--> 172 </div> 173 <!--end pl-c-tabs--> 174</div> 175<!--end pl-c-pattern-info__panel--></script>
175<script src="styleguide/data/patternlab-data.js" defer="defer"></script>
175<script src="annotations/annotations.js" defer="defer"></script>
175<script src="styleguide/js/patternlab-viewer.modern.js" type="module" crossorigin></script>
175<script>!function(){var e=document.createElement("script");if(!("noModule"in e)&&"onbeforeload"in e){var t=!1;document.addEventListener("beforeload",(function(n){if(n.target===e)t=!0;else if(!n.target.hasAttribute("nomodule")||!t)return;n.preventDefault()}),!0),e.type="module",e.src=".",document.head.appendChild(e),e.remove()}}()</script>
175<script src="styleguide/js/patternlab-viewer.js" defer="defer" nomodule crossorigin></script>
175<script></script>
175</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.