{
    "componentChunkName": "component---src-components-left-nav-layout-js",
    "path": "/writing/language-grammar",
    "result": {"data":{"allMdx":{"edges":[{"node":{"frontmatter":{"path":"/foundations","title":"Foundations","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/colors","title":"Colors","group":"Foundations","status":null,"blurb":"Overview of semantic colors and the full color palette","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/layout","title":"Layout","group":"Foundations","status":null,"blurb":"Spacing between elements on the page are organized in units of 4px.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/accessibility","title":"Accessibility","group":"Foundations","status":null,"blurb":"We aim to make our website and software accessible to the widest audience possible","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/motion","title":"Motion","group":"Foundations","status":null,"blurb":"I like the way you move","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/shadows","title":"Shadows","group":"Foundations","status":null,"blurb":"Shadow is the visual way to communicate the elevation and hierarchy of components.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/radii","title":"Radii","group":"Foundations","status":null,"blurb":"Corner radii are generally organized in units of 2px","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/color","title":"Color","group":"Brand","status":null,"blurb":"Our color system develops on our unique aesthetic and offers flexibility to harmonize the visual consistency across every touchpoint.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/foundations/typography","title":"Typography","group":"Foundations","status":null,"blurb":"Houzz typography system can be used with other components to present content and product clearly and effectively to users.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/glyphs","title":"Glyphs","group":"Brand","status":null,"blurb":"The Houzz glyphs are single-color icons portraying a subject as is, serving as a visual cue throughout the web and mobile products and marketing materials.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/brand","title":"Brand","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/illustration","title":"Illustrations","group":"Brand","status":null,"blurb":"As a visual communication tool, Houzz's illustration supports the effective and efficient delivery of messages and story-telling.","isPrivate":true}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/logo/architecture","title":"Brand Architecture","group":"Brand","status":null,"blurb":"Our brand architecture system organizes our sub-brands, products and partnerships to help users relate to Houzz.","isPrivate":null}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/logo","title":"The Logo","group":"Brand","status":null,"blurb":"The Houzz logos are one of our most valuable assets. It sets us apart from our competitors and represents everything we are: our experience, our values and our offerings.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/product-illustrations","title":"Product Illustrations","group":"Brand","status":null,"blurb":"Our product illustrations reference Houzz physical products in a simple manner to create educational moments as opposed to relying on a metaphorical narrative.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/brand/photography","title":"Photography","group":"Brand","status":null,"blurb":"Another visual communication tool, selecting the right photography is critical as it relates to our brand.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/secondary-graphics","title":"Secondary Graphics","group":"Brand","status":null,"blurb":"Secondary graphics are the visual elements we use to visualize our brand personality and to tell the story of our positioning statement and messaging.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing","title":"Content","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/writing/language-grammar","title":"Language & Grammar","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/messaging-guidelines","title":"Messaging Guidelines","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/brand/typography","title":"Typography","group":"Brand","status":null,"blurb":"Typography is our system of fonts. Our font Proxima Nova assists our homeowners and home renovation professionals through each stage of their journey.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/vocabulary","title":"Vocabulary","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/writing-style","title":"Writing Style","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/voice-tone","title":"Voice & Tone","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/marketing","title":"Marketing","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/avatar/avatar-group","title":"Avatar Group","group":"Components","status":"Healthy","blurb":"Displays a list of avatars as a stack, allowing to limit the maximum number of avatars visible. ","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/collapsible/accordion","title":"Accordion","group":"Components","status":"Healthy","blurb":"Use an accordion simple to reduce page length or scrolling by the user when a single content block would require too much space.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/badge","title":"Badge","group":"Components","status":"Healthy","blurb":"A non-interactive badge component","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/avatar","title":"Avatar","group":"Components","status":"Healthy","blurb":"Represents a user and can display a profile picture or initials. If neither are available, it will fallback to a ghost icon.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/banner","title":"Banner","group":"Components","status":"Healthy","blurb":"Banners show important information sunch as persistent condition, system status etc to users.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/box","title":"Box","group":"Components","status":"Healthy","blurb":"The Box component serves as a wrapper component for most layout needs. By default, it renders a <code>div</code> element","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/button/button-group","title":"Button Group","group":"Components","status":"Healthy","blurb":"ButtonGroup helps grouping the multiple buttons with same style","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/checkbox","title":"Checkbox","group":"Components","status":"Healthy","blurb":"Used for selecting one or multiple items from several options.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/button","title":"Button","group":"Components","status":"Healthy","blurb":"Buttons make common actions more obvious and help users more easily perform them. Buttons use text and sometimes icons to communicate the action that will occur when the user interacts with them.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/card","title":"Card","group":"Components","status":"Healthy","blurb":"A card","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/content-icon","title":"Content Icon","group":"Components","status":"Healthy","blurb":"A base component useful for implementing color-coded icons representing features, documents etc.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/get-started","title":"Getting Started","group":"!Documentation","status":null,"blurb":"<code>houzz-ui</code> is already integrated with Houzz jukwaa applications. Below is a guide to setting up in a new app, or information if you're curious what tooling we use.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/collapsible","title":"Collapsible","group":"Components","status":"Healthy","blurb":"The collapsible is a UI component for expanding or collapsing content areas within a page.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/icon/concept-icon","title":"Concept Icon","group":"Components","status":"Healthy","blurb":"Houzz concept (aka tier 2) icons","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/grid","title":"Grid","group":"Components","status":"Healthy","blurb":"A responsive grid layout component.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/guide","title":"Developer Guide","group":"!Documentation","status":null,"blurb":"<code>houzz-ui</code> was created to provide a composable, accessibile, extendable / themable component library based off of Houzz's design system and principles.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components","title":"Components","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/icon","title":"Icon","group":"Components","status":"Healthy","blurb":"Houzz icons","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/link","title":"Link","group":"Components","status":"Healthy","blurb":"A link is a navigation element most commonly used to navigate from one page to another","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/loading","title":"Loading","group":"Components","status":"Healthy","blurb":"Different ways to indicate something is loading","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu/flyout","title":"Flyout Menu","group":"Components","status":"Healthy","blurb":"Flyout Menu is a Menu that opens on hover vs click","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu/mega","title":"Mega Menu","group":"Components","status":"Planned","blurb":"Dropdown / overlay that behaves more like a Modal","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu/application","title":"Application/Toolbar Menu","group":"Components","status":"Planned","blurb":"A group of dropdown navigation Menus or links that define an applications available actions","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu","title":"Menu / Dropdown","group":"Components","status":"Healthy","blurb":"An accessible dropdown menu. Used when the options are actions or navigations to other pages.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/modal","title":"Modal","group":"Components","status":"Dev","blurb":"Yes, another modal","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/pill","title":"Pill","group":"Components","status":"Healthy","blurb":"Pills are compact elements that represent an input, attribute, or action. Pills can be used to help users discover, identify, or refine content.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/popover/callout","title":"Callout","group":"Components","status":"Healthy","blurb":"Callouts are anchored components that can be used to teach, inform or guide users about certain features of the product.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/popover","title":"Popover","group":"Components","status":"Healthy","blurb":"Thin wrapper around PopperJS library","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/radio","title":"Radio","group":"Components","status":"Healthy","blurb":"A radio button is an element that allows a user to select a single item from a predefined list of options.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/recipes","title":"Recipes","group":"!Documentation","status":null,"blurb":"Some helpful guides to get started. Please let us know if you have any requests.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/select/select-menu","title":"Select Menu","group":"Components","status":"Healthy","blurb":"Implements a listbox UI component. <code>SelectMenu</code> is similar to a <code>Menu</code>, but keeps track of the selected item and displays it. It behaves similar to a native <code>select</code> element","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/card/selection-card","title":"Selection Card","group":"Components","status":"Healthy","blurb":"A card with checkbox or radio input selection","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/select","title":"Select","group":"Components","status":"Healthy","blurb":"Allows users pick a value from predefined options","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/skeleton","title":"Skeleton","group":"Components","status":"Healthy","blurb":"A building block for placeholder UI previews","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/slider","title":"Slider","group":"Components","status":"Healthy","blurb":"Used for making selections from a range of values","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/stack","title":"Stack","group":"Components","status":"Healthy","blurb":"A responsive flex layout component.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/switch","title":"Switch","group":"Components","status":"Healthy","blurb":"A toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Users expect switches to see an immediate effect when they toggle it on.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/status","title":"Status Indicator","group":"Components","status":"Healthy","blurb":"A badge variant representing a status.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table/cell-recipes","title":"Cell Recipes","group":"Other","status":null,"blurb":"Reusable cell components","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/system-props","title":"System Props","group":"!Documentation","status":null,"blurb":"Houzz UI utilize \"System Props\", which give us a consistent interface to style our components through props. To achieve this, we use styled-system to group common props which are automatically applied to each component.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table/column-recipes","title":"Column Recipes","group":"Other","status":null,"blurb":"Pre-configured column definitions for common patterns and use cases","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table/view-customization","title":"View Customization","group":"Other","status":null,"blurb":"User table view preferences, storing and retreiving","isPrivate":true}}},{"node":{"frontmatter":{"path":"/components/tabs","title":"Tabs","group":"Components","status":"Healthy","blurb":"Tabs are used to navigate between related views within the same context.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table","title":"Table","group":"Other","status":null,"blurb":"A collection of UI components for displaying data in tables","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/textarea","title":"Textarea","group":"Components","status":"Healthy","blurb":"Textareas allow users to input and edit a longer amount of custom text than a text field.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/text","title":"Text","group":"Components","status":"Healthy","blurb":"Text is the one of the main ways to communicate and convey ideas in product.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/tooltip","title":"Tooltip","group":"Components","status":"Healthy","blurb":"Tooltips display informative and guiding content when users hover over or focus on an element.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/toast","title":"Toast","group":"Components","status":"Dev","blurb":"Toasts show up to communicate messages to users with limited information and actions.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/text-input","title":"Text Input","group":"Components","status":"Healthy","blurb":"TextInput let users enter and edit text","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/theme","title":"Theme","group":"!Documentation","status":null,"blurb":"Theme definition","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/toggle-button","title":"Toggle Button","group":"Components","status":"Healthy","blurb":"Serves as a tool to group related button options. The toggle component adjusts how content is presented on a page. A user cannot select two buttons at once; they must select one OR the other option.","isPrivate":null}}}]},"mdx":{"id":"010435bb-746a-50d6-af4c-5d7780e0970e","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"path\": \"/writing/language-grammar\",\n  \"title\": \"Language & Grammar\",\n  \"group\": \"Content\",\n  \"isPrivate\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h3\", {\n    \"id\": \"language--grammar\"\n  }, \"Language & Grammar\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"path":"/writing/language-grammar","title":"Language & Grammar","group":"Content","status":null,"blurb":null,"externalLink":null,"isPrivate":true}}},"pageContext":{"id":"010435bb-746a-50d6-af4c-5d7780e0970e","node":{"id":"010435bb-746a-50d6-af4c-5d7780e0970e","frontmatter":{"path":"/writing/language-grammar","title":"Language & Grammar","group":"Content","status":null,"blurb":null}},"pages":[{"node":{"id":"b1dc4ce9-2d6d-53d7-917e-287a01e8f7d5","frontmatter":{"path":"/foundations","title":"Foundations","group":null,"status":null,"blurb":null}}},{"node":{"id":"d83ef77e-574d-5915-92b1-1a69fe0b9a5a","frontmatter":{"path":"/foundations/colors","title":"Colors","group":"Foundations","status":null,"blurb":"Overview of semantic colors and the full color palette"}}},{"node":{"id":"11a9675f-4e65-582d-a0b6-f897053e960a","frontmatter":{"path":"/foundations/layout","title":"Layout","group":"Foundations","status":null,"blurb":"Spacing between elements on the page are organized in units of 4px."}}},{"node":{"id":"afbfed98-77f1-5d3e-b928-442dbeafa6dc","frontmatter":{"path":"/foundations/accessibility","title":"Accessibility","group":"Foundations","status":null,"blurb":"We aim to make our website and software accessible to the widest audience possible"}}},{"node":{"id":"fa324d40-a574-5e2e-94b8-48029b62c3fc","frontmatter":{"path":"/foundations/motion","title":"Motion","group":"Foundations","status":null,"blurb":"I like the way you move"}}},{"node":{"id":"65b2a806-af4b-5be0-b36d-e03392c7a321","frontmatter":{"path":"/foundations/shadows","title":"Shadows","group":"Foundations","status":null,"blurb":"Shadow is the visual way to communicate the elevation and hierarchy of components."}}},{"node":{"id":"dc4eb025-8699-55e1-84bd-505abd64fd9a","frontmatter":{"path":"/foundations/radii","title":"Radii","group":"Foundations","status":null,"blurb":"Corner radii are generally organized in units of 2px"}}},{"node":{"id":"33b615ef-7950-539a-b5ba-fed91799babe","frontmatter":{"path":"/brand/color","title":"Color","group":"Brand","status":null,"blurb":"Our color system develops on our unique aesthetic and offers flexibility to harmonize the visual consistency across every touchpoint."}}},{"node":{"id":"7afb50a7-8417-54a4-a2e5-b647478f00b8","frontmatter":{"path":"/foundations/typography","title":"Typography","group":"Foundations","status":null,"blurb":"Houzz typography system can be used with other components to present content and product clearly and effectively to users."}}},{"node":{"id":"a33d06ae-8782-5cb2-b977-f1bccb9e6ff1","frontmatter":{"path":"/brand/glyphs","title":"Glyphs","group":"Brand","status":null,"blurb":"The Houzz glyphs are single-color icons portraying a subject as is, serving as a visual cue throughout the web and mobile products and marketing materials."}}},{"node":{"id":"7c51fc76-5e7a-502f-a747-cacd0ca1f7c4","frontmatter":{"path":"/brand","title":"Brand","group":null,"status":null,"blurb":null}}},{"node":{"id":"7e166960-2791-5e2e-aa05-12b5691f0a03","frontmatter":{"path":"/brand/illustration","title":"Illustrations","group":"Brand","status":null,"blurb":"As a visual communication tool, Houzz's illustration supports the effective and efficient delivery of messages and story-telling."}}},{"node":{"id":"e12d67c9-e94f-544a-ab41-68126b8d74cf","frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null}}},{"node":{"id":"2f2eb971-8a23-5dc3-abd9-12f38fe2d029","frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null}}},{"node":{"id":"3071cd54-233f-5f1d-b565-5d63bbab7c9b","frontmatter":{"path":"/brand/logo/architecture","title":"Brand Architecture","group":"Brand","status":null,"blurb":"Our brand architecture system organizes our sub-brands, products and partnerships to help users relate to Houzz."}}},{"node":{"id":"c5d8ff35-43a0-5fd7-bf43-42d5a1a43af3","frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null}}},{"node":{"id":"11304056-763d-5091-a217-926e12e5f67f","frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null}}},{"node":{"id":"30861bed-430c-50b3-a7f8-8379387da249","frontmatter":{"path":"/brand/logo","title":"The Logo","group":"Brand","status":null,"blurb":"The Houzz logos are one of our most valuable assets. It sets us apart from our competitors and represents everything we are: our experience, our values and our offerings."}}},{"node":{"id":"b0f0f4b3-59a1-53af-bbe5-ead254cc0e58","frontmatter":{"path":"/brand/product-illustrations","title":"Product Illustrations","group":"Brand","status":null,"blurb":"Our product illustrations reference Houzz physical products in a simple manner to create educational moments as opposed to relying on a metaphorical narrative."}}},{"node":{"id":"6e95b523-da5d-5f31-ba43-1cb8f029ded9","frontmatter":{"path":"/brand/photography","title":"Photography","group":"Brand","status":null,"blurb":"Another visual communication tool, selecting the right photography is critical as it relates to our brand."}}},{"node":{"id":"a5333b1b-1157-5d4c-a305-b4531ca9b03e","frontmatter":{"path":"/brand/secondary-graphics","title":"Secondary Graphics","group":"Brand","status":null,"blurb":"Secondary graphics are the visual elements we use to visualize our brand personality and to tell the story of our positioning statement and messaging."}}},{"node":{"id":"1f51cdee-e86f-57cd-818f-d7958d0fae60","frontmatter":{"path":"/writing","title":"Content","group":null,"status":null,"blurb":null}}},{"node":{"id":"010435bb-746a-50d6-af4c-5d7780e0970e","frontmatter":{"path":"/writing/language-grammar","title":"Language & Grammar","group":"Content","status":null,"blurb":null}}},{"node":{"id":"59bc2813-8d7a-50c4-ade7-1e5c5108ac5d","frontmatter":{"path":"/writing/messaging-guidelines","title":"Messaging Guidelines","group":"Content","status":null,"blurb":null}}},{"node":{"id":"69d1ad2a-073c-58e9-84f5-da5b8b044107","frontmatter":{"path":"/brand/typography","title":"Typography","group":"Brand","status":null,"blurb":"Typography is our system of fonts. Our font Proxima Nova assists our homeowners and home renovation professionals through each stage of their journey."}}},{"node":{"id":"d4154e3f-1c29-5335-8dd1-99173fd7015c","frontmatter":{"path":"/writing/vocabulary","title":"Vocabulary","group":"Content","status":null,"blurb":null}}},{"node":{"id":"1b9099bf-82d6-56d0-aa98-f023d7e0831e","frontmatter":{"path":"/writing/writing-style","title":"Writing Style","group":"Content","status":null,"blurb":null}}},{"node":{"id":"ba9ad8b9-1bad-5ccc-ba0d-e2e69ed9dc48","frontmatter":{"path":"/writing/voice-tone","title":"Voice & Tone","group":"Content","status":null,"blurb":null}}},{"node":{"id":"fdd8d1e2-0ee7-5817-a3cf-0b4848adcdfc","frontmatter":{"path":"/marketing","title":"Marketing","group":null,"status":null,"blurb":null}}},{"node":{"id":"2c9a9c62-e4e0-5bb1-94fd-0240c42b3b9b","frontmatter":{"path":"/components/avatar/avatar-group","title":"Avatar Group","group":"Components","status":"Healthy","blurb":"Displays a list of avatars as a stack, allowing to limit the maximum number of avatars visible. "}}},{"node":{"id":"90fe01c4-1426-58d9-a6f4-c28e0c3ad4fb","frontmatter":{"path":"/components/collapsible/accordion","title":"Accordion","group":"Components","status":"Healthy","blurb":"Use an accordion simple to reduce page length or scrolling by the user when a single content block would require too much space."}}},{"node":{"id":"c0bc4539-4a48-59ed-a2af-1d01e4d4d7e5","frontmatter":{"path":"/components/badge","title":"Badge","group":"Components","status":"Healthy","blurb":"A non-interactive badge component"}}},{"node":{"id":"bcf11124-78ef-59e4-ae7e-62c36a334b14","frontmatter":{"path":"/components/avatar","title":"Avatar","group":"Components","status":"Healthy","blurb":"Represents a user and can display a profile picture or initials. If neither are available, it will fallback to a ghost icon."}}},{"node":{"id":"d6dffaba-27bd-578d-9c4e-6c090bd146e7","frontmatter":{"path":"/components/banner","title":"Banner","group":"Components","status":"Healthy","blurb":"Banners show important information sunch as persistent condition, system status etc to users."}}},{"node":{"id":"3d37e26a-df91-58b8-bfc2-4c377aed6559","frontmatter":{"path":"/components/box","title":"Box","group":"Components","status":"Healthy","blurb":"The Box component serves as a wrapper component for most layout needs. By default, it renders a <code>div</code> element"}}},{"node":{"id":"8019b49d-547c-5bb2-aaaf-cc3224b1661a","frontmatter":{"path":"/components/button/button-group","title":"Button Group","group":"Components","status":"Healthy","blurb":"ButtonGroup helps grouping the multiple buttons with same style"}}},{"node":{"id":"f97a0113-67ee-546f-94fd-c18deb4c25b2","frontmatter":{"path":"/components/checkbox","title":"Checkbox","group":"Components","status":"Healthy","blurb":"Used for selecting one or multiple items from several options."}}},{"node":{"id":"2ad7848e-e8fb-57c2-acab-f410c68a65b6","frontmatter":{"path":"/components/button","title":"Button","group":"Components","status":"Healthy","blurb":"Buttons make common actions more obvious and help users more easily perform them. Buttons use text and sometimes icons to communicate the action that will occur when the user interacts with them."}}},{"node":{"id":"6906dd9d-cf3f-55e3-a376-459ef9547354","frontmatter":{"path":"/components/card","title":"Card","group":"Components","status":"Healthy","blurb":"A card"}}},{"node":{"id":"1a02ab4c-cced-57b5-a9f2-7043a33179a1","frontmatter":{"path":"/components/content-icon","title":"Content Icon","group":"Components","status":"Healthy","blurb":"A base component useful for implementing color-coded icons representing features, documents etc."}}},{"node":{"id":"ca6ffccb-55ea-5aac-abb6-45ba93e4496a","frontmatter":{"path":"/components/get-started","title":"Getting Started","group":"!Documentation","status":null,"blurb":"<code>houzz-ui</code> is already integrated with Houzz jukwaa applications. Below is a guide to setting up in a new app, or information if you're curious what tooling we use."}}},{"node":{"id":"5f166b4e-e70a-520b-a9a6-e39cbaf9febc","frontmatter":{"path":"/components/collapsible","title":"Collapsible","group":"Components","status":"Healthy","blurb":"The collapsible is a UI component for expanding or collapsing content areas within a page."}}},{"node":{"id":"5f48b800-e465-572b-ab60-b43d525b5f65","frontmatter":{"path":"/components/icon/concept-icon","title":"Concept Icon","group":"Components","status":"Healthy","blurb":"Houzz concept (aka tier 2) icons"}}},{"node":{"id":"f1f56efb-89b3-5c8e-aa53-b77efcd3ebe7","frontmatter":{"path":"/components/grid","title":"Grid","group":"Components","status":"Healthy","blurb":"A responsive grid layout component."}}},{"node":{"id":"eada18cf-eb10-571f-95ea-32f12901126f","frontmatter":{"path":"/components/guide","title":"Developer Guide","group":"!Documentation","status":null,"blurb":"<code>houzz-ui</code> was created to provide a composable, accessibile, extendable / themable component library based off of Houzz's design system and principles."}}},{"node":{"id":"66658803-fc4d-5761-8206-3a2214403f5c","frontmatter":{"path":"/components","title":"Components","group":null,"status":null,"blurb":null}}},{"node":{"id":"40863596-04c7-54c9-97c6-7e838b7b7326","frontmatter":{"path":"/components/icon","title":"Icon","group":"Components","status":"Healthy","blurb":"Houzz icons"}}},{"node":{"id":"6d507b41-b0e6-5577-bd36-19008e205e94","frontmatter":{"path":"/components/link","title":"Link","group":"Components","status":"Healthy","blurb":"A link is a navigation element most commonly used to navigate from one page to another"}}},{"node":{"id":"a59bcc48-1e76-5ce3-b1fb-de336d46218f","frontmatter":{"path":"/components/loading","title":"Loading","group":"Components","status":"Healthy","blurb":"Different ways to indicate something is loading"}}},{"node":{"id":"e944f8cd-6aa6-587f-9a22-ef18ee0d2596","frontmatter":{"path":"/components/menu/flyout","title":"Flyout Menu","group":"Components","status":"Healthy","blurb":"Flyout Menu is a Menu that opens on hover vs click"}}},{"node":{"id":"daa7d68e-457c-5416-8045-36a79f9fdf45","frontmatter":{"path":"/components/menu/mega","title":"Mega Menu","group":"Components","status":"Planned","blurb":"Dropdown / overlay that behaves more like a Modal"}}},{"node":{"id":"077160a7-0552-5ce6-a313-0a64d3a34b7f","frontmatter":{"path":"/components/menu/application","title":"Application/Toolbar Menu","group":"Components","status":"Planned","blurb":"A group of dropdown navigation Menus or links that define an applications available actions"}}},{"node":{"id":"c9e38231-1169-5b12-b147-237e7f4a619d","frontmatter":{"path":"/components/menu","title":"Menu / Dropdown","group":"Components","status":"Healthy","blurb":"An accessible dropdown menu. Used when the options are actions or navigations to other pages."}}},{"node":{"id":"a2f3f0c2-5f34-5160-bf1c-d6dc8b5debe8","frontmatter":{"path":"/components/modal","title":"Modal","group":"Components","status":"Dev","blurb":"Yes, another modal"}}},{"node":{"id":"ed7ad56b-1342-5000-b0dd-653ad441bbf2","frontmatter":{"path":"/components/pill","title":"Pill","group":"Components","status":"Healthy","blurb":"Pills are compact elements that represent an input, attribute, or action. Pills can be used to help users discover, identify, or refine content."}}},{"node":{"id":"3b6a83b4-6a8c-547e-beb4-5f89c973c585","frontmatter":{"path":"/components/popover/callout","title":"Callout","group":"Components","status":"Healthy","blurb":"Callouts are anchored components that can be used to teach, inform or guide users about certain features of the product."}}},{"node":{"id":"11763dfd-97fd-5715-b82c-dfb1a552271a","frontmatter":{"path":"/components/popover","title":"Popover","group":"Components","status":"Healthy","blurb":"Thin wrapper around PopperJS library"}}},{"node":{"id":"83e37a90-02d4-5c99-abc0-a6f0fab63d80","frontmatter":{"path":"/components/radio","title":"Radio","group":"Components","status":"Healthy","blurb":"A radio button is an element that allows a user to select a single item from a predefined list of options."}}},{"node":{"id":"0be84773-2231-5c17-912e-5948ce565df9","frontmatter":{"path":"/components/recipes","title":"Recipes","group":"!Documentation","status":null,"blurb":"Some helpful guides to get started. Please let us know if you have any requests."}}},{"node":{"id":"e6cea260-b678-5b95-aff2-e6c2a2ec3a38","frontmatter":{"path":"/components/select/select-menu","title":"Select Menu","group":"Components","status":"Healthy","blurb":"Implements a listbox UI component. <code>SelectMenu</code> is similar to a <code>Menu</code>, but keeps track of the selected item and displays it. It behaves similar to a native <code>select</code> element"}}},{"node":{"id":"e07e66f7-7239-512c-9faf-c96913db4e79","frontmatter":{"path":"/components/card/selection-card","title":"Selection Card","group":"Components","status":"Healthy","blurb":"A card with checkbox or radio input selection"}}},{"node":{"id":"610cccd0-ea93-5b3d-a3f7-38c6e05c7a5e","frontmatter":{"path":"/components/select","title":"Select","group":"Components","status":"Healthy","blurb":"Allows users pick a value from predefined options"}}},{"node":{"id":"1d747ae1-ad09-5b74-8af4-d366c1a627df","frontmatter":{"path":"/components/skeleton","title":"Skeleton","group":"Components","status":"Healthy","blurb":"A building block for placeholder UI previews"}}},{"node":{"id":"8031e4bd-3c38-5481-a5c9-84e8f2668994","frontmatter":{"path":"/components/slider","title":"Slider","group":"Components","status":"Healthy","blurb":"Used for making selections from a range of values"}}},{"node":{"id":"f02ec73f-59fa-56d9-9e32-1fd3c96813aa","frontmatter":{"path":"/components/stack","title":"Stack","group":"Components","status":"Healthy","blurb":"A responsive flex layout component."}}},{"node":{"id":"d1fbedca-1d1b-5399-a269-bc5d02c00642","frontmatter":{"path":"/components/switch","title":"Switch","group":"Components","status":"Healthy","blurb":"A toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Users expect switches to see an immediate effect when they toggle it on."}}},{"node":{"id":"cd048b42-2ffc-5fc9-9710-f803a04928c6","frontmatter":{"path":"/components/status","title":"Status Indicator","group":"Components","status":"Healthy","blurb":"A badge variant representing a status."}}},{"node":{"id":"48b0f7d8-8b22-5f97-8aaf-ceb1f46463e4","frontmatter":{"path":"/components/table/cell-recipes","title":"Cell Recipes","group":"Other","status":null,"blurb":"Reusable cell components"}}},{"node":{"id":"54a4165f-5494-5853-b57f-a7a5cbaffe25","frontmatter":{"path":"/components/system-props","title":"System Props","group":"!Documentation","status":null,"blurb":"Houzz UI utilize \"System Props\", which give us a consistent interface to style our components through props. To achieve this, we use styled-system to group common props which are automatically applied to each component."}}},{"node":{"id":"03e22f65-d8c2-5419-9e2d-112f2cb9af9b","frontmatter":{"path":"/components/table/column-recipes","title":"Column Recipes","group":"Other","status":null,"blurb":"Pre-configured column definitions for common patterns and use cases"}}},{"node":{"id":"5bed3923-39fe-50cf-a556-2b12767eddd9","frontmatter":{"path":"/components/table/view-customization","title":"View Customization","group":"Other","status":null,"blurb":"User table view preferences, storing and retreiving"}}},{"node":{"id":"d2d6b699-a889-5f7e-b87d-dacc0c00fdf2","frontmatter":{"path":"/components/tabs","title":"Tabs","group":"Components","status":"Healthy","blurb":"Tabs are used to navigate between related views within the same context."}}},{"node":{"id":"7c5563dd-0ac6-5467-a165-bb658e2c1b44","frontmatter":{"path":"/components/table","title":"Table","group":"Other","status":null,"blurb":"A collection of UI components for displaying data in tables"}}},{"node":{"id":"dd9f3e0c-751d-5b99-b9a4-c277766a96df","frontmatter":{"path":"/components/textarea","title":"Textarea","group":"Components","status":"Healthy","blurb":"Textareas allow users to input and edit a longer amount of custom text than a text field."}}},{"node":{"id":"ddcf504e-d455-5c08-9b16-225dc26c01a1","frontmatter":{"path":"/components/text","title":"Text","group":"Components","status":"Healthy","blurb":"Text is the one of the main ways to communicate and convey ideas in product."}}},{"node":{"id":"5627bb35-b4a3-58fe-bd5d-af5930cb59b8","frontmatter":{"path":"/components/tooltip","title":"Tooltip","group":"Components","status":"Healthy","blurb":"Tooltips display informative and guiding content when users hover over or focus on an element."}}},{"node":{"id":"88df8296-1a52-508e-8af1-5f2ea8aa57a1","frontmatter":{"path":"/components/toast","title":"Toast","group":"Components","status":"Dev","blurb":"Toasts show up to communicate messages to users with limited information and actions."}}},{"node":{"id":"abac1003-bdcf-5422-b696-c01e68e8214d","frontmatter":{"path":"/components/text-input","title":"Text Input","group":"Components","status":"Healthy","blurb":"TextInput let users enter and edit text"}}},{"node":{"id":"e9b9f42b-34be-51ba-83c6-057305de3725","frontmatter":{"path":"/components/theme","title":"Theme","group":"!Documentation","status":null,"blurb":"Theme definition"}}},{"node":{"id":"8b7c730b-d8b1-52cf-bc1b-484416842426","frontmatter":{"path":"/components/toggle-button","title":"Toggle Button","group":"Components","status":"Healthy","blurb":"Serves as a tool to group related button options. The toggle component adjusts how content is presented on a page. A user cannot select two buttons at once; they must select one OR the other option."}}}]}},
    "staticQueryHashes": []}