{"_id":"560b394aaf40a70d003df31e","user":"55a6caa022cfa321008e01d6","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"parentDoc":null,"project":"55a6e72e8cc73e0d00096635","__v":21,"category":{"_id":"560b13cbafa0990d00979545","project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","pages":["560b13f987b71d0d000d3bf6","560b394aaf40a70d003df31e","560b39669c7be70d00100bef","560b397d4a1f990d00dc7338","560b3991c341310d00de29de","560b39ae4a1f990d00dc733a","562ffd364445ae1900383e84","5642a810cc9d8e0d00adda69","5660daef89e82f0d008f6823","56a1e0b42255370d00ad5e9c"],"__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-29T22:42:19.181Z","from_sync":false,"order":13,"slug":"css-javascript-design-resources","title":"CSS and Design Assets"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-30T01:22:18.660Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:html]\n{\n  \"html\": \"<A NAME=\\\"DesignPatterns\\\"></a>The <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/scss/components/</span> subdirectory will make up the vast majority of your compiled CSS. It contains custom components that are used to populate the <span class=\\\"inline-code\\\">&lt;theme-name&gt;/templates/components/</span> directory.<br><br>\\n\\nThe use, and naming, of files within <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/scss/components/</span> is optional: Theme developers are free to swap in other resources, such as Bootstrap. (However, be warned that doing so would require significant work.) The following entries document the default resources’ organization and naming conventions:<br>\\n\\n<ul>\\n  <li><a href=\\\"#Patterns\\\">Design Patterns</a></li>\\n <li><a href=\\\"#CitadelNaming\\\">Citadel Subdirectory/Naming Conventions</a></li>\\n <li><a href=\\\"#FoundationDir\\\">Foundation Subdirectory</a></li>\\n <li><a href=\\\"#StencilDir\\\">Stencil Subdirectory</a></li>\\n <li><a href=\\\"#VendorSubdir\\\">Vendor Subdirectory</a></li>\\n</ul>\\n\\n<h2> <A NAME=\\\"Patterns\\\"></a>Design Patterns</h2>\\n\\nStencil themes include an internal pattern library called Citadel, which consumes the ZURB <a href=\\\"http://foundation.zurb.com/showcase/about.html\\\">Foundation framework</a>. Foundation provides the basis for creating responsive themes.  Citadel extends the Foundation framework’s mixins and components to provide Stencil’s own mixins, extensible components, and utilities.\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Citadel is based specifically on Foundation 5.5.3, which installs with the Stencil framework. (Direct download link is [here](https://github.com/zurb/foundation-sites/releases/tag/v5.5.3); documentation is [here](http://foundation.zurb.com/sites/docs/v/5.5.3/).) We do not support Foundation 6.x, due to breaking changes introduced between versions 5.x and 6.x.\",\n  \"title\": \"Foundation 5.5.3 Only\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"A theme developer might use drop-down lists, forms, and similar resources from Citadel’s design patterns. The design/style language underlying these Citadel resources is the <a href=\\\"http://sass-lang.com/documentation/file.SASS_REFERENCE.html\\\">Sass</a>/SCSS (Syntactically Awesome StyleSheets) CSS preprocessor.<br>\\n\\n <br>\\n\\nCitadel design patterns reside in the <span class=\\\"inline-code\\\">&lt;theme-name&gt;/assets/scss/components/</span> subdirectory, whose own subdirectories are named <span class=\\\"inline-code\\\">/citadel/</span>, <span class=\\\"inline-code\\\">/foundation/</span>, <span class=\\\"inline-code\\\">/stencil/</span>, and <span class=\\\"inline-code\\\">/vendor/</span>. <br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n          /assets\\n                      /scss\\n                                  /components/ \\n                                              /citadel/\\n                                              /foundation/\\n                                              /stencil/\\n                                              /vendor/</pre>\\n\\n\\n<h2> <A NAME=\\\"CitadelNaming\\\"></a>Citadel Subdirectory/Naming Conventions</h2>\\n\\nThis subdirectory contains Citadel-specific resources. They are named according to our <a href=\\\"https://github.com/bigcommerce/sass-style-guide\\\">style guide</a>, which follows <a href=\\\"http://getbem.com/naming/\\\">BEM</a> and <a href=\\\"https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md\\\">SUIT CSS</a> naming conventions: Class names are structured, and hyphens are meaningful (that is, hyphens are not used merely to separate words). <br><br>\\n\\nAs a general rule, classes here are named functionally, not based on their visual presentation or their content. Here are some prototypes and examples:<br>\\n\\n<ul><li><span class=\\\"inline-code\\\">componentName</span> (for example: <span class=\\\"inline-code\\\">.dropdown</span> or <span class=\\\"inline-code\\\">.buttonGroup</span>)</li></ul>\\n\\n<ul><li><span class=\\\"inline-code\\\">componentName--modifierName</span> (for example: <span class=\\\"inline-code\\\">.dropdown--dropUp</span> or <span class=\\\"inline-code\\\">.button--primary</span>)</li></ul>\\n\\n<ul><li><span class=\\\"inline-code\\\">componentName-descendantName</span> (for example: <span class=\\\"inline-code\\\">.dropdown-item</span>)</li></ul>\\n\\n<ul><li><span class=\\\"inline-code\\\">componentName.is-stateOfComponent</span> (for example: <span class=\\\"inline-code\\\">.dropdown.is-active</span>)</li></ul>\\n\\n<ul><li><span class=\\\"inline-code\\\">u-utilityName</span> (for example: <span class=\\\"inline-code\\\">.u-textTruncate</span>)</li></ul>\\n\\n<ul><li>Abstractly: <span class=\\\"inline-code\\\">[&lt;namespace&gt;-]&lt;componentName&gt;[--modifierName|-descendentName]</span></li></ul>\\n\\n\\n<h3> Components versus Utilities</h3>\\n\\nOur naming scheme makes an architectural distinction between components and utilities. Components are defined as custom elements that enclose specific semantics, styling, and behavior. Our syntax for naming them is:<br>\\n\\n<pre>&lt;componentName&gt;[--modifierName|-descendantName]</pre>\\n\\n\\nComponent names are in camel case. We have tried to choose names that are as short as possible, but as long as necessary. For example:<br>\\n\\n<ul><li><span class=\\\"inline-code\\\">.nav</span>, not <span class=\\\"inline-code\\\">.navigation</span>; but:</li></ul>\\n\\n<ul><li><span class=\\\"inline-code\\\">.button</span>, not <span class=\\\"inline-code\\\">.btn</span></li></ul>\\n\\nUtility classes are defined as low-level, structural and positional traits. Utilities can be applied directly to any element. Multiple utilities can be used together, and utilities can be used alongside component classes.<br>\\n\\n <br>\\n\\nTo make HTML patterns as reusable as possible, we have used utility classes sparingly, reserving them for component-level styling.<br>\\n\\n <br>\\n\\nOur syntax for naming utilities is camel case, prefixed with a <span class=\\\"inline-code\\\">u-</span> namespace:<br>\\n\\n<p></p><pre>u-&lt;utilityName&gt;</pre>\\n\\n\\n<h3>Variables and Mixins</h3>\\n\\nCitadel variables and mixins follow similar naming conventions.<br>\\n\\n <br>\\n\\nVariables are things that can change over time. Their names are in camel case, and show context:<br>\\n\\n<p></p><pre>[&lt;componentName&gt;[--modifierName][-descendentName]-&lt;propertyName&gt;\\n-&lt;variablename&gt;[--&lt;modifierName&gt;]</pre>\\n\\n\\nMixins follow regular camel-case naming conventions. Namespacing is not universally required for mixins. However, where a mixin has been created for a utility, its name matches the utility’s name, including <span class=\\\"inline-code\\\">u-</span> namespacing:<br>\\n\\n<p></p><pre>:::at:::mixin buttonVariant;\\n@mixin u-textTruncate;</pre>\\n\\n\\n<h2> <A NAME=\\\"FoundationDir\\\"></a>Foundation Subdirectory</h2>\\n\\nThe <span class=\\\"inline-code\\\">.../components/foundation/</span> subdirectory contains files installed by the ZURB <a href=\\\"http://foundation.zurb.com/showcase/about.html\\\">Foundation framework</a>. <NOBR>(Stencil's Foundation</nobr> support is limited to version 5.5.3.)<br>\\n\\n<h2> <A NAME=\\\"StencilDir\\\"></a>Stencil Subdirectory</h2>\\n\\nThe <span class=\\\"inline-code\\\">.../components/stencil/</span> subdirectory contains CSS files unique to Stencil themes, which are used to create specific page elements within the themes. This subdirectory’s own children are shown below:<br>\\n\\n<p></p><pre>&lt;theme-name&gt;\\n      /assets\\n          /scss\\n              /components\\n                   /stencil\\n                        /account/\\n                        /addReturn/\\n                        /addressBox/\\n                        /banners/\\n                        /blocker/\\n                        /compare/\\n                        /facetLabel/\\n                        /facetedSearch\\n                        /heroCarousel/\\n                        /navPages/\\n                        /navUser/\\n                        /productCarousel/\\n                        /productReviews/\\n                        /quickView/\\n                        /ribbon/\\n                        /socialLinks/\\n                        /tags/\\n                        /toggleLink/\\n                        /writeReview/\\n</pre>\\n<br>\\n\\nThis subdirectory’s children contain CSS for the following page elements:\\n\\n<p></p><table>\\n  <tbody><tr>\\n    <td class=\\\"\\\">Subdirectory</td>\\n    <td class=\\\"\\\">UI Element/Purpose</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">account</td>\\n    <td class=\\\"\\\">Customer account details</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">addressBox</td>\\n    <td class=\\\"\\\">Customer shipping addresses</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">addReturn</td>\\n    <td class=\\\"\\\">Add a product-return request</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">banners</td>\\n    <td class=\\\"\\\">Banners displayed across storefront’s top and bottom</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">blocker</td>\\n    <td class=\\\"\\\">Position .blocker element above another element, to prevent a user action</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">compare</td>\\n    <td class=\\\"\\\">Layout for product-comparison table</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">facetedSearch</td>\\n    <td class=\\\"\\\">Faceted-search toggle (on/off), navigation list, and filters</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">facetLabel</td>\\n    <td class=\\\"\\\">Labels for faceted-search display</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">heroCarousel</td>\\n    <td class=\\\"\\\">Carousel of prominent (\\\"hero\\\") images</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">navPages</td>\\n    <td class=\\\"\\\">Styles for page navigation, with responsive layout</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">navUser</td>\\n    <td class=\\\"\\\">Styles for cart counter, quick search</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">productCarousel</td>\\n    <td class=\\\"\\\">Carousel of product images</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">productReviews</td>\\n    <td class=\\\"\\\">Styles for product reviews</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">productView</td>\\n    <td class=\\\"\\\">Product display (with thumbnails suppressed for mobile/tablet), product details, product options (size, color, etc.), product sharing</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">quickView</td>\\n    <td class=\\\"\\\">Quick-view modal window for a selected product</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">ribbon</td>\\n    <td class=\\\"\\\">Top-right text badges, for messages like \\\"On sale\\\"</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">socialLinks</td>\\n    <td class=\\\"\\\">Styles for social-media links</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">tags</td>\\n    <td class=\\\"\\\">Styles for blog-post tags</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">toggleLink</td>\\n    <td class=\\\"\\\">Styles for collapsible/expandable components</td>\\n  </tr>\\n  <tr>\\n    <td class=\\\"\\\">writeReview</td>\\n    <td class=\\\"\\\">Styles for product-review submission form</td>\\n  </tr>\\n</tbody></table>\\n\\n\\n  <h2> <A NAME=\\\"VendorSubdir\\\"></a>Vendor Subdirectory</h2>\\n\\nThe <span class=\\\"inline-code\\\">.../components/vendor/</span> subdirectory contains the consumed version of framework components from your chosen provider. There is some renaming of these components, to match Stencil naming conventions.<br>\"\n}\n[/block]","excerpt":"","slug":"componentsdesign-patterns","type":"basic","title":"Components/Design Patterns"}

Components/Design Patterns


[block:html] { "html": "<A NAME=\"DesignPatterns\"></a>The <span class=\"inline-code\">&lt;theme-name&gt;/assets/scss/components/</span> subdirectory will make up the vast majority of your compiled CSS. It contains custom components that are used to populate the <span class=\"inline-code\">&lt;theme-name&gt;/templates/components/</span> directory.<br><br>\n\nThe use, and naming, of files within <span class=\"inline-code\">&lt;theme-name&gt;/assets/scss/components/</span> is optional: Theme developers are free to swap in other resources, such as Bootstrap. (However, be warned that doing so would require significant work.) The following entries document the default resources’ organization and naming conventions:<br>\n\n<ul>\n <li><a href=\"#Patterns\">Design Patterns</a></li>\n <li><a href=\"#CitadelNaming\">Citadel Subdirectory/Naming Conventions</a></li>\n <li><a href=\"#FoundationDir\">Foundation Subdirectory</a></li>\n <li><a href=\"#StencilDir\">Stencil Subdirectory</a></li>\n <li><a href=\"#VendorSubdir\">Vendor Subdirectory</a></li>\n</ul>\n\n<h2> <A NAME=\"Patterns\"></a>Design Patterns</h2>\n\nStencil themes include an internal pattern library called Citadel, which consumes the ZURB <a href=\"http://foundation.zurb.com/showcase/about.html\">Foundation framework</a>. Foundation provides the basis for creating responsive themes. Citadel extends the Foundation framework’s mixins and components to provide Stencil’s own mixins, extensible components, and utilities." } [/block] [block:callout] { "type": "warning", "body": "Citadel is based specifically on Foundation 5.5.3, which installs with the Stencil framework. (Direct download link is [here](https://github.com/zurb/foundation-sites/releases/tag/v5.5.3); documentation is [here](http://foundation.zurb.com/sites/docs/v/5.5.3/).) We do not support Foundation 6.x, due to breaking changes introduced between versions 5.x and 6.x.", "title": "Foundation 5.5.3 Only" } [/block] [block:html] { "html": "A theme developer might use drop-down lists, forms, and similar resources from Citadel’s design patterns. The design/style language underlying these Citadel resources is the <a href=\"http://sass-lang.com/documentation/file.SASS_REFERENCE.html\">Sass</a>/SCSS (Syntactically Awesome StyleSheets) CSS preprocessor.<br>\n\n <br>\n\nCitadel design patterns reside in the <span class=\"inline-code\">&lt;theme-name&gt;/assets/scss/components/</span> subdirectory, whose own subdirectories are named <span class=\"inline-code\">/citadel/</span>, <span class=\"inline-code\">/foundation/</span>, <span class=\"inline-code\">/stencil/</span>, and <span class=\"inline-code\">/vendor/</span>. <br>\n\n<p></p><pre>&lt;theme-name&gt;\n /assets\n /scss\n /components/ \n /citadel/\n /foundation/\n /stencil/\n /vendor/</pre>\n\n\n<h2> <A NAME=\"CitadelNaming\"></a>Citadel Subdirectory/Naming Conventions</h2>\n\nThis subdirectory contains Citadel-specific resources. They are named according to our <a href=\"https://github.com/bigcommerce/sass-style-guide\">style guide</a>, which follows <a href=\"http://getbem.com/naming/\">BEM</a> and <a href=\"https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md\">SUIT CSS</a> naming conventions: Class names are structured, and hyphens are meaningful (that is, hyphens are not used merely to separate words). <br><br>\n\nAs a general rule, classes here are named functionally, not based on their visual presentation or their content. Here are some prototypes and examples:<br>\n\n<ul><li><span class=\"inline-code\">componentName</span> (for example: <span class=\"inline-code\">.dropdown</span> or <span class=\"inline-code\">.buttonGroup</span>)</li></ul>\n\n<ul><li><span class=\"inline-code\">componentName--modifierName</span> (for example: <span class=\"inline-code\">.dropdown--dropUp</span> or <span class=\"inline-code\">.button--primary</span>)</li></ul>\n\n<ul><li><span class=\"inline-code\">componentName-descendantName</span> (for example: <span class=\"inline-code\">.dropdown-item</span>)</li></ul>\n\n<ul><li><span class=\"inline-code\">componentName.is-stateOfComponent</span> (for example: <span class=\"inline-code\">.dropdown.is-active</span>)</li></ul>\n\n<ul><li><span class=\"inline-code\">u-utilityName</span> (for example: <span class=\"inline-code\">.u-textTruncate</span>)</li></ul>\n\n<ul><li>Abstractly: <span class=\"inline-code\">[&lt;namespace&gt;-]&lt;componentName&gt;[--modifierName|-descendentName]</span></li></ul>\n\n\n<h3> Components versus Utilities</h3>\n\nOur naming scheme makes an architectural distinction between components and utilities. Components are defined as custom elements that enclose specific semantics, styling, and behavior. Our syntax for naming them is:<br>\n\n<pre>&lt;componentName&gt;[--modifierName|-descendantName]</pre>\n\n\nComponent names are in camel case. We have tried to choose names that are as short as possible, but as long as necessary. For example:<br>\n\n<ul><li><span class=\"inline-code\">.nav</span>, not <span class=\"inline-code\">.navigation</span>; but:</li></ul>\n\n<ul><li><span class=\"inline-code\">.button</span>, not <span class=\"inline-code\">.btn</span></li></ul>\n\nUtility classes are defined as low-level, structural and positional traits. Utilities can be applied directly to any element. Multiple utilities can be used together, and utilities can be used alongside component classes.<br>\n\n <br>\n\nTo make HTML patterns as reusable as possible, we have used utility classes sparingly, reserving them for component-level styling.<br>\n\n <br>\n\nOur syntax for naming utilities is camel case, prefixed with a <span class=\"inline-code\">u-</span> namespace:<br>\n\n<p></p><pre>u-&lt;utilityName&gt;</pre>\n\n\n<h3>Variables and Mixins</h3>\n\nCitadel variables and mixins follow similar naming conventions.<br>\n\n <br>\n\nVariables are things that can change over time. Their names are in camel case, and show context:<br>\n\n<p></p><pre>[&lt;componentName&gt;[--modifierName][-descendentName]-&lt;propertyName&gt;\n-&lt;variablename&gt;[--&lt;modifierName&gt;]</pre>\n\n\nMixins follow regular camel-case naming conventions. Namespacing is not universally required for mixins. However, where a mixin has been created for a utility, its name matches the utility’s name, including <span class=\"inline-code\">u-</span> namespacing:<br>\n\n<p></p><pre>@mixin buttonVariant;\n@mixin u-textTruncate;</pre>\n\n\n<h2> <A NAME=\"FoundationDir\"></a>Foundation Subdirectory</h2>\n\nThe <span class=\"inline-code\">.../components/foundation/</span> subdirectory contains files installed by the ZURB <a href=\"http://foundation.zurb.com/showcase/about.html\">Foundation framework</a>. <NOBR>(Stencil's Foundation</nobr> support is limited to version 5.5.3.)<br>\n\n<h2> <A NAME=\"StencilDir\"></a>Stencil Subdirectory</h2>\n\nThe <span class=\"inline-code\">.../components/stencil/</span> subdirectory contains CSS files unique to Stencil themes, which are used to create specific page elements within the themes. This subdirectory’s own children are shown below:<br>\n\n<p></p><pre>&lt;theme-name&gt;\n /assets\n /scss\n /components\n /stencil\n /account/\n /addReturn/\n /addressBox/\n /banners/\n /blocker/\n /compare/\n /facetLabel/\n /facetedSearch\n /heroCarousel/\n /navPages/\n /navUser/\n /productCarousel/\n /productReviews/\n /quickView/\n /ribbon/\n /socialLinks/\n /tags/\n /toggleLink/\n /writeReview/\n</pre>\n<br>\n\nThis subdirectory’s children contain CSS for the following page elements:\n\n<p></p><table>\n <tbody><tr>\n <td class=\"\">Subdirectory</td>\n <td class=\"\">UI Element/Purpose</td>\n </tr>\n <tr>\n <td class=\"\">account</td>\n <td class=\"\">Customer account details</td>\n </tr>\n <tr>\n <td class=\"\">addressBox</td>\n <td class=\"\">Customer shipping addresses</td>\n </tr>\n <tr>\n <td class=\"\">addReturn</td>\n <td class=\"\">Add a product-return request</td>\n </tr>\n <tr>\n <td class=\"\">banners</td>\n <td class=\"\">Banners displayed across storefront’s top and bottom</td>\n </tr>\n <tr>\n <td class=\"\">blocker</td>\n <td class=\"\">Position .blocker element above another element, to prevent a user action</td>\n </tr>\n <tr>\n <td class=\"\">compare</td>\n <td class=\"\">Layout for product-comparison table</td>\n </tr>\n <tr>\n <td class=\"\">facetedSearch</td>\n <td class=\"\">Faceted-search toggle (on/off), navigation list, and filters</td>\n </tr>\n <tr>\n <td class=\"\">facetLabel</td>\n <td class=\"\">Labels for faceted-search display</td>\n </tr>\n <tr>\n <td class=\"\">heroCarousel</td>\n <td class=\"\">Carousel of prominent (\"hero\") images</td>\n </tr>\n <tr>\n <td class=\"\">navPages</td>\n <td class=\"\">Styles for page navigation, with responsive layout</td>\n </tr>\n <tr>\n <td class=\"\">navUser</td>\n <td class=\"\">Styles for cart counter, quick search</td>\n </tr>\n <tr>\n <td class=\"\">productCarousel</td>\n <td class=\"\">Carousel of product images</td>\n </tr>\n <tr>\n <td class=\"\">productReviews</td>\n <td class=\"\">Styles for product reviews</td>\n </tr>\n <tr>\n <td class=\"\">productView</td>\n <td class=\"\">Product display (with thumbnails suppressed for mobile/tablet), product details, product options (size, color, etc.), product sharing</td>\n </tr>\n <tr>\n <td class=\"\">quickView</td>\n <td class=\"\">Quick-view modal window for a selected product</td>\n </tr>\n <tr>\n <td class=\"\">ribbon</td>\n <td class=\"\">Top-right text badges, for messages like \"On sale\"</td>\n </tr>\n <tr>\n <td class=\"\">socialLinks</td>\n <td class=\"\">Styles for social-media links</td>\n </tr>\n <tr>\n <td class=\"\">tags</td>\n <td class=\"\">Styles for blog-post tags</td>\n </tr>\n <tr>\n <td class=\"\">toggleLink</td>\n <td class=\"\">Styles for collapsible/expandable components</td>\n </tr>\n <tr>\n <td class=\"\">writeReview</td>\n <td class=\"\">Styles for product-review submission form</td>\n </tr>\n</tbody></table>\n\n\n <h2> <A NAME=\"VendorSubdir\"></a>Vendor Subdirectory</h2>\n\nThe <span class=\"inline-code\">.../components/vendor/</span> subdirectory contains the consumed version of framework components from your chosen provider. There is some renaming of these components, to match Stencil naming conventions.<br>" } [/block]