{"action":"created","comment":{"url":"https://api.github.com/repos/rackerlabs/design-system/pulls/comments/150871363","pull_request_review_id":76486042,"id":150871363,"diff_hunk":"@@ -0,0 +1,224 @@\n+---\n+title: Choice Tiles\n+parent: Inputs and Controls\n+layout: component\n+category: Components\n+usage: >\n+  Choice tiles are an alternative selector pattern to radio buttons and checkboxes that provide a means of both displaying choices more visually and of providing a more detailed description of a choice.\n+preview-image: preview-images/choice-tile.svg\n+status: stable\n+resource: true\n+last-modified: 2017-11-12\n+---\n+\n+{% include toc.html %}\n+\n+## Introduction\n+\n+<div class=\"hxRow\">\n+{% column left:\"hxCol-4 hxCol-xs-12 hxCol-sm-12 hxCol-md-4 hxCol-lg-4\" %}\n+### When to use\n+\n+- Use choices tiles when presenting a set of choices that are easily recognized by iconography.\n+- Only use choice tiles when two or more selections are available.\n+\n+### Best practices\n+\n+- When using a description keep the text brief to ensure users engage with are not overwhelmed by a wall across multiple choice tiles.\n+\n+{% endcolumn %}\n+\n+{% column right:\"hxCol-8 hxCol-xs-12 hxCol-sm-12 hxCol-md-8 hxCol-lg-8\" %}\n+{% figure [caption:\"The choice tile pattern\"] [class:\"image bg-light border\"] %}\n+![]({{site.baseurl}}/assets/images/components/inputs-and-controls/choice-tiles/choice-tile-hero.png)\n+{% endfigure %}\n+{% endcolumn %}\n+</div>\n+\n+## Default choice tile\n+<div class=\"hxRow\">\n+{% column left:\"hxCol-4 hxCol-xs-12 hxCol-sm-12 hxCol-md-4 hxCol-lg-4\" %}\n+\n+Cards are composed of the following:\n+\n+- **Choice tile**: the container that houses the choice tile selection.\n+- **Icon**: an iconographic representation of the selection contained within a choice tile.\n+- **Heading**: the title of the selection contained within a choice tile.\n+- **Description** *(optional)*: a description assists in briefly explaining the choice tile selection to a user.\n+\n+{% endcolumn %}\n+\n+{% column right:\"hxCol-8 hxCol-xs-12 hxCol-sm-12 hxCol-md-8 hxCol-lg-8\" %}\n+{% figure [caption:\"Standard layout for a choice tile.\"] [class:\"image bg-light border\"] %}\n+![]({{site.baseurl}}/assets/images/components/inputs-and-controls/choice-tiles/choice-tile-default.png)\n+{% endfigure %}\n+{% endcolumn %}\n+</div>\n+\n+### Layout options\n+<div class=\"hxRow\">\n+{% column left:\"hxCol-4 hxCol-xs-12 hxCol-sm-12 hxCol-md-4 hxCol-lg-4\" %}\n+\n+- Use a choice tile to capture a user selection within a form.\n+- Choice tiles comes in small, medium, and large sizes. Only a singular size may be used when making a selection choice. \n+- Choice tile options **do not** exceed nine options.\n+- Small tiles **do not** span more than 6 columns across (max 6 tiles in a row).\n+- Medium tiles **do not** span more than 8 columns across (max 4 tiles in a row).\n+- Large tiles **do not** span more than 9 columns across (max 3 tiles in a row).\n+\n+\n+{% endcolumn %}\n+\n+{% column right:\"hxCol-8 hxCol-xs-12 hxCol-sm-12 hxCol-md-8 hxCol-lg-8\" %}\n+{% figure [caption:\"Choice tiles on a full-width grid with no right sidebar\"] [class:\"image bg-light border\"] %}\n+![]({{site.baseurl}}/assets/images/components/inputs-and-controls/choice-tiles/choice-tile-layout.png)\n+{% endfigure %}\n+{% endcolumn %}\n+</div>\n+\n+### Responsive design specifications","path":"_component_design/choice-tiles.md","position":79,"original_position":79,"commit_id":"9afd89a775fd2051d5e28b9e5285db7ef0f2d94a","original_commit_id":"105bed923cbe1d3496e5d08048e54bd2965de4d9","user":{"login":"araiford","id":933210,"avatar_url":"https://avatars3.githubusercontent.com/u/933210?v=4","gravatar_id":"","url":"https://api.github.com/users/araiford","html_url":"https://github.com/araiford","followers_url":"https://api.github.com/users/araiford/followers","following_url":"https://api.github.com/users/araiford/following{/other_user}","gists_url":"https://api.github.com/users/araiford/gists{/gist_id}","starred_url":"https://api.github.com/users/araiford/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/araiford/subscriptions","organizations_url":"https://api.github.com/users/araiford/orgs","repos_url":"https://api.github.com/users/araiford/repos","events_url":"https://api.github.com/users/araiford/events{/privacy}","received_events_url":"https://api.github.com/users/araiford/received_events","type":"User","site_admin":false},"body":"Change to `Responsive Specifications` for brevity","created_at":"2017-11-14T15:43:50Z","updated_at":"2017-11-14T16:02:22Z","html_url":"https://github.com/rackerlabs/design-system/pull/330#discussion_r150871363","pull_request_url":"https://api.github.com/repos/rackerlabs/design-system/pulls/330","author_association":"COLLABORATOR","_links":{"self":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/comments/150871363"},"html":{"href":"https://github.com/rackerlabs/design-system/pull/330#discussion_r150871363"},"pull_request":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/330"}}},"pull_request":{"url":"https://api.github.com/repos/rackerlabs/design-system/pulls/330","id":152527463,"html_url":"https://github.com/rackerlabs/design-system/pull/330","diff_url":"https://github.com/rackerlabs/design-system/pull/330.diff","patch_url":"https://github.com/rackerlabs/design-system/pull/330.patch","issue_url":"https://api.github.com/repos/rackerlabs/design-system/issues/330","number":330,"state":"open","locked":false,"title":"docs(choice-tile): build doc","user":{"login":"technabors","id":586682,"avatar_url":"https://avatars3.githubusercontent.com/u/586682?v=4","gravatar_id":"","url":"https://api.github.com/users/technabors","html_url":"https://github.com/technabors","followers_url":"https://api.github.com/users/technabors/followers","following_url":"https://api.github.com/users/technabors/following{/other_user}","gists_url":"https://api.github.com/users/technabors/gists{/gist_id}","starred_url":"https://api.github.com/users/technabors/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/technabors/subscriptions","organizations_url":"https://api.github.com/users/technabors/orgs","repos_url":"https://api.github.com/users/technabors/repos","events_url":"https://api.github.com/users/technabors/events{/privacy}","received_events_url":"https://api.github.com/users/technabors/received_events","type":"User","site_admin":false},"body":"Creating initial commit for choice-tiles. \r\nChange notes:\r\n\r\n- Created new preview-image and uploaded to CDN.\r\n- I used @2x pngs for this doc, but included SVGs as well for easy switching as needed.\r\n- Generated new in-context hero image. (thoughts on the style?)\r\n- Converted doc from sketch to md\r\n- Performed some initial editing on the first half of the doc\r\n\r\nReady for content, HTML, & visual reviews.\r\n","created_at":"2017-11-14T15:00:23Z","updated_at":"2017-11-14T16:02:22Z","closed_at":null,"merged_at":null,"merge_commit_sha":"c857c78f50737d29bf67ae720e0f564a7e649271","assignee":null,"assignees":[],"requested_reviewers":[{"login":"robb-romans","id":730187,"avatar_url":"https://avatars2.githubusercontent.com/u/730187?v=4","gravatar_id":"","url":"https://api.github.com/users/robb-romans","html_url":"https://github.com/robb-romans","followers_url":"https://api.github.com/users/robb-romans/followers","following_url":"https://api.github.com/users/robb-romans/following{/other_user}","gists_url":"https://api.github.com/users/robb-romans/gists{/gist_id}","starred_url":"https://api.github.com/users/robb-romans/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robb-romans/subscriptions","organizations_url":"https://api.github.com/users/robb-romans/orgs","repos_url":"https://api.github.com/users/robb-romans/repos","events_url":"https://api.github.com/users/robb-romans/events{/privacy}","received_events_url":"https://api.github.com/users/robb-romans/received_events","type":"User","site_admin":false}],"milestone":null,"commits_url":"https://api.github.com/repos/rackerlabs/design-system/pulls/330/commits","review_comments_url":"https://api.github.com/repos/rackerlabs/design-system/pulls/330/comments","review_comment_url":"https://api.github.com/repos/rackerlabs/design-system/pulls/comments{/number}","comments_url":"https://api.github.com/repos/rackerlabs/design-system/issues/330/comments","statuses_url":"https://api.github.com/repos/rackerlabs/design-system/statuses/9afd89a775fd2051d5e28b9e5285db7ef0f2d94a","head":{"label":"rackerlabs:website-docs-choicetiles-evan","ref":"website-docs-choicetiles-evan","sha":"9afd89a775fd2051d5e28b9e5285db7ef0f2d94a","user":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars1.githubusercontent.com/u/84293?v=4","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"repo":{"id":63092460,"name":"design-system","full_name":"rackerlabs/design-system","owner":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars1.githubusercontent.com/u/84293?v=4","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/rackerlabs/design-system","description":"A prototype of the Design System created by Rackspace Experience Design","fork":false,"url":"https://api.github.com/repos/rackerlabs/design-system","forks_url":"https://api.github.com/repos/rackerlabs/design-system/forks","keys_url":"https://api.github.com/repos/rackerlabs/design-system/keys{/key_id}","collaborators_url":"https://api.github.com/repos/rackerlabs/design-system/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/rackerlabs/design-system/teams","hooks_url":"https://api.github.com/repos/rackerlabs/design-system/hooks","issue_events_url":"https://api.github.com/repos/rackerlabs/design-system/issues/events{/number}","events_url":"https://api.github.com/repos/rackerlabs/design-system/events","assignees_url":"https://api.github.com/repos/rackerlabs/design-system/assignees{/user}","branches_url":"https://api.github.com/repos/rackerlabs/design-system/branches{/branch}","tags_url":"https://api.github.com/repos/rackerlabs/design-system/tags","blobs_url":"https://api.github.com/repos/rackerlabs/design-system/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/rackerlabs/design-system/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/rackerlabs/design-system/git/refs{/sha}","trees_url":"https://api.github.com/repos/rackerlabs/design-system/git/trees{/sha}","statuses_url":"https://api.github.com/repos/rackerlabs/design-system/statuses/{sha}","languages_url":"https://api.github.com/repos/rackerlabs/design-system/languages","stargazers_url":"https://api.github.com/repos/rackerlabs/design-system/stargazers","contributors_url":"https://api.github.com/repos/rackerlabs/design-system/contributors","subscribers_url":"https://api.github.com/repos/rackerlabs/design-system/subscribers","subscription_url":"https://api.github.com/repos/rackerlabs/design-system/subscription","commits_url":"https://api.github.com/repos/rackerlabs/design-system/commits{/sha}","git_commits_url":"https://api.github.com/repos/rackerlabs/design-system/git/commits{/sha}","comments_url":"https://api.github.com/repos/rackerlabs/design-system/comments{/number}","issue_comment_url":"https://api.github.com/repos/rackerlabs/design-system/issues/comments{/number}","contents_url":"https://api.github.com/repos/rackerlabs/design-system/contents/{+path}","compare_url":"https://api.github.com/repos/rackerlabs/design-system/compare/{base}...{head}","merges_url":"https://api.github.com/repos/rackerlabs/design-system/merges","archive_url":"https://api.github.com/repos/rackerlabs/design-system/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/rackerlabs/design-system/downloads","issues_url":"https://api.github.com/repos/rackerlabs/design-system/issues{/number}","pulls_url":"https://api.github.com/repos/rackerlabs/design-system/pulls{/number}","milestones_url":"https://api.github.com/repos/rackerlabs/design-system/milestones{/number}","notifications_url":"https://api.github.com/repos/rackerlabs/design-system/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/rackerlabs/design-system/labels{/name}","releases_url":"https://api.github.com/repos/rackerlabs/design-system/releases{/id}","deployments_url":"https://api.github.com/repos/rackerlabs/design-system/deployments","created_at":"2016-07-11T18:33:13Z","updated_at":"2017-11-01T20:09:42Z","pushed_at":"2017-11-14T16:01:43Z","git_url":"git://github.com/rackerlabs/design-system.git","ssh_url":"git@github.com:rackerlabs/design-system.git","clone_url":"https://github.com/rackerlabs/design-system.git","svn_url":"https://github.com/rackerlabs/design-system","homepage":"","size":241199,"stargazers_count":7,"watchers_count":7,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":7,"mirror_url":null,"archived":false,"open_issues_count":18,"forks":7,"open_issues":18,"watchers":7,"default_branch":"master"}},"base":{"label":"rackerlabs:staging","ref":"staging","sha":"90d830c1b3ad97624ec250e15db83099af360e4e","user":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars1.githubusercontent.com/u/84293?v=4","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"repo":{"id":63092460,"name":"design-system","full_name":"rackerlabs/design-system","owner":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars1.githubusercontent.com/u/84293?v=4","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/rackerlabs/design-system","description":"A prototype of the Design System created by Rackspace Experience Design","fork":false,"url":"https://api.github.com/repos/rackerlabs/design-system","forks_url":"https://api.github.com/repos/rackerlabs/design-system/forks","keys_url":"https://api.github.com/repos/rackerlabs/design-system/keys{/key_id}","collaborators_url":"https://api.github.com/repos/rackerlabs/design-system/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/rackerlabs/design-system/teams","hooks_url":"https://api.github.com/repos/rackerlabs/design-system/hooks","issue_events_url":"https://api.github.com/repos/rackerlabs/design-system/issues/events{/number}","events_url":"https://api.github.com/repos/rackerlabs/design-system/events","assignees_url":"https://api.github.com/repos/rackerlabs/design-system/assignees{/user}","branches_url":"https://api.github.com/repos/rackerlabs/design-system/branches{/branch}","tags_url":"https://api.github.com/repos/rackerlabs/design-system/tags","blobs_url":"https://api.github.com/repos/rackerlabs/design-system/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/rackerlabs/design-system/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/rackerlabs/design-system/git/refs{/sha}","trees_url":"https://api.github.com/repos/rackerlabs/design-system/git/trees{/sha}","statuses_url":"https://api.github.com/repos/rackerlabs/design-system/statuses/{sha}","languages_url":"https://api.github.com/repos/rackerlabs/design-system/languages","stargazers_url":"https://api.github.com/repos/rackerlabs/design-system/stargazers","contributors_url":"https://api.github.com/repos/rackerlabs/design-system/contributors","subscribers_url":"https://api.github.com/repos/rackerlabs/design-system/subscribers","subscription_url":"https://api.github.com/repos/rackerlabs/design-system/subscription","commits_url":"https://api.github.com/repos/rackerlabs/design-system/commits{/sha}","git_commits_url":"https://api.github.com/repos/rackerlabs/design-system/git/commits{/sha}","comments_url":"https://api.github.com/repos/rackerlabs/design-system/comments{/number}","issue_comment_url":"https://api.github.com/repos/rackerlabs/design-system/issues/comments{/number}","contents_url":"https://api.github.com/repos/rackerlabs/design-system/contents/{+path}","compare_url":"https://api.github.com/repos/rackerlabs/design-system/compare/{base}...{head}","merges_url":"https://api.github.com/repos/rackerlabs/design-system/merges","archive_url":"https://api.github.com/repos/rackerlabs/design-system/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/rackerlabs/design-system/downloads","issues_url":"https://api.github.com/repos/rackerlabs/design-system/issues{/number}","pulls_url":"https://api.github.com/repos/rackerlabs/design-system/pulls{/number}","milestones_url":"https://api.github.com/repos/rackerlabs/design-system/milestones{/number}","notifications_url":"https://api.github.com/repos/rackerlabs/design-system/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/rackerlabs/design-system/labels{/name}","releases_url":"https://api.github.com/repos/rackerlabs/design-system/releases{/id}","deployments_url":"https://api.github.com/repos/rackerlabs/design-system/deployments","created_at":"2016-07-11T18:33:13Z","updated_at":"2017-11-01T20:09:42Z","pushed_at":"2017-11-14T16:01:43Z","git_url":"git://github.com/rackerlabs/design-system.git","ssh_url":"git@github.com:rackerlabs/design-system.git","clone_url":"https://github.com/rackerlabs/design-system.git","svn_url":"https://github.com/rackerlabs/design-system","homepage":"","size":241199,"stargazers_count":7,"watchers_count":7,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":7,"mirror_url":null,"archived":false,"open_issues_count":18,"forks":7,"open_issues":18,"watchers":7,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/330"},"html":{"href":"https://github.com/rackerlabs/design-system/pull/330"},"issue":{"href":"https://api.github.com/repos/rackerlabs/design-system/issues/330"},"comments":{"href":"https://api.github.com/repos/rackerlabs/design-system/issues/330/comments"},"review_comments":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/330/comments"},"review_comment":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/330/commits"},"statuses":{"href":"https://api.github.com/repos/rackerlabs/design-system/statuses/9afd89a775fd2051d5e28b9e5285db7ef0f2d94a"}},"author_association":"COLLABORATOR"}}
{"actor":{"display_login":"araiford"}}