D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mattborn
Full window
Github gist
Stateless Components
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Stateless Components</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://use.typekit.net/exf4iwe.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="script.js"></script> </head> <body class="Body"> <div class="GuideSection"> <div class="GuideAlign"> <h1 class="GuideH1">Stateless Components</h1> </div> </div> <div class="GuideSection"> <div class="GuideAlign"> <h2 class="GuideH2">Structure</h2> <h3 class="GuideH3">DesktopLayout</h3> <div class="DesktopLayout"></div> <h3 class="GuideH3">Header</h3> <p class="GuideP">Uses <code class="GuideCode"><PageTitle></code> and <code class="GuideCode"><SmallPassiveButton></code>.</p> <div class="Header"> <div class="PageTitle" style="float:left">Example Header</div> <button class="SmallPassiveButton" style="float:right">Small Passive Button</button> <div style="clear:both"></div> </div> <h3 class="GuideH3">Overlay</h3> <div class="Overlay"></div> </div> </div> <div class="GuideSection"> <div class="GuideAlign"> <h2 class="GuideH2">Navigation</h2> <h3 class="GuideH3">CompanyLogo</h3> <div class="CompanyLogo" style="background-image:url(https://fillmurray.com/400/200)"></div> <h3 class="GuideH3">MediumNavItem</h3> <div class="MediumNavItem">Medium Nav Item</div> <h3 class="GuideH3">MediumNavItemHover</h3> <div class="MediumNavItemHover">Medium Nav Item Hover</div> <h3 class="GuideH3">MediumNavItemSelected</h3> <div class="MediumNavItemSelected">Medium Nav Item Selected</div> <h3 class="GuideH3">SmallNavItem</h3> <div class="SmallNavItem">Small Nav Item</div> <h3 class="GuideH3">UtilityNavItem</h3> <div class="UtilityNavItem"> <svg class="SmallIcon" style="display:inline-block;padding:2px;vertical-align:top" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <span>Utility Nav Item</span> </div> <h3 class="GuideH3">UtilityNavItemHover</h3> <div class="UtilityNavItemHover"> <svg class="SmallIcon" style="display:inline-block;padding:2px;vertical-align:top" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <span>Utility Nav Item Hover</span> </div> <h3 class="GuideH3">UtilityNavItemSelected</h3> <div class="UtilityNavItemSelected"> <svg class="SmallIcon" style="display:inline-block;padding:2px;vertical-align:top" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <span>Utility Nav Item Selected</span> </div> <h3 class="GuideH3">UtilityNav</h3> <p class="GuideP">Uses <code class="GuideCode"><UtilityNavItem></code>, <code class="GuideCode"><UtilityNavItemHover></code> and <code class="GuideCode"><UtilityNavItemHoverSelected></code>.</p> <div class="UtilityNav"> <div class="UtilityNavItem"> <svg class="SmallIcon" style="display:inline-block;padding:2px;vertical-align:top" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <span>Utility Nav Item</span> </div> <div class="UtilityNavItemHover"> <svg class="SmallIcon" style="display:inline-block;padding:2px;vertical-align:top" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <span>Utility Nav Item Hover</span> </div> <div class="UtilityNavItemSelected"> <svg class="SmallIcon" style="display:inline-block;padding:2px;vertical-align:top" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <span>Utility Nav Item Selected</span> </div> </div> <h3 class="GuideH3">Account</h3> <p class="GuideP">Uses <code class="GuideCode"><MediumAvatar></code>.</p> <div class="AccountButton"> <div class="MediumAvatar" style="display:inline-block;vertical-align:middle"></div> <div class="AccountButtonName">Bill Murray</div> <svg class="SmallIcon" style="color:#929a9b;right:12px;position:absolute;top:27px" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> </div> </div> </div> <div class="GuideSection"> <div class="GuideAlign"> <h2 class="GuideH2">Media</h2> <h3 class="GuideH3">LargeAvatar</h3> <div class="LargeAvatar" style="background-image:url(https://fillmurray.com/200/200)"></div> <h3 class="GuideH3">MediumAvatar</h3> <div class="MediumAvatar" style="background-image:url(https://fillmurray.com/200/200)"></div> <h3 class="GuideH3">SmallAvatar</h3> <div class="SmallAvatar" style="background-image:url(https://fillmurray.com/200/200)"></div> <h3 class="GuideH3">HeroImage</h3> <div class="HeroImage" style="background-image:url(https://fillmurray.com/700/350)"><div class="HeroGradient"></div></div> <h3 class="GuideH3">ArticleThumb</h3> <div class="ArticleThumb" style="background-image:url(https://fillmurray.com/200/200)"></div> <h3 class="GuideH3">TwitterThumb</h3> <div class="TwitterThumb" style="background-image:url(https://fillmurray.com/200/200)"></div> </div> </div> <div class="GuideSection"> <div class="GuideAlign"> <h2 class="GuideH2">Forms</h2> <h3 class="GuideH3">Checkbox</h3> <div class="Checkbox"> <div class="CheckboxOuter"></div> <input class="CheckboxElement" id="c1" type="checkbox"> <label class="Label" for="c1">Checkbox</label> </div> <div class="FocusedCheckbox"> <div class="FocusedCheckboxOuter"></div> <input checked class="FocusedCheckboxElement" id="c2" type="checkbox"> <label class="Label" for="c2" style="text-decoration:underline">Focused Checkbox</label> </div> <div class="CheckedCheckbox"> <div class="CheckedCheckboxOuter"><div class="CheckedCheckboxInner"></div></div> <input checked class="CheckedCheckboxElement" id="c3" type="checkbox"> <label class="Label" for="c3">Checked Checkbox</label> </div> <div class="DisabledCheckbox"> <div class="DisabledCheckboxOuter"><div class="DisabledCheckboxInner"></div></div> <input class="DisabledCheckboxElement" disabled id="c4" type="checkbox"> <label class="Label" for="c4" style="color:#dee1e1">Disabled Checkbox</label> </div> <h3 class="GuideH3">Radio</h3> <div class="Radio"> <div class="RadioOuter"><div class="RadioInner"></div></div> <input class="RadioElement" id="r1" name="radios" type="radio"> <label class="Label" for="r1">Radio</label> </div> <div class="FocusedRadio"> <div class="FocusedRadioOuter"></div> <input checked class="FocusedRadioElement" id="r2" type="radio"> <label class="Label" for="r2" style="text-decoration:underline">Focused Radio</label> </div> <div class="CheckedRadio"> <div class="CheckedRadioOuter"><div class="CheckedRadioInner"></div></div> <input checked class="CheckedRadioElement" id="r3" name="radios" type="radio"> <label class="Label" for="r3">Checked Radio</label> </div> <div class="DisabledRadio"> <div class="DisabledRadioOuter"><div class="DisabledRadioInner"></div></div> <input class="DisabledRadioElement" disabled id="r4" name="radios" type="radio"> <label class="Label" for="r4" style="color:#dee1e1">Disabled Radio</label> </div> <h3 class="GuideH3">Switch</h3> <div class="Switch"> <div class="SwitchOuter"><div class="SwitchInner"></div></div> <input class="SwitchElement" id="c1" type="checkbox"> <label class="Label" for="c1">Switch</label> </div> <div class="FocusedSwitch"> <div class="FocusedSwitchOuter"><div class="SwitchInner"></div></div> <input checked class="FocusedSwitchElement" id="c2" type="checkbox"> <label class="Label" for="c2" style="text-decoration:underline">Focused Switch</label> </div> <div class="CheckedSwitch"> <div class="CheckedSwitchOuter"><div class="CheckedSwitchInner"></div></div> <input checked class="CheckedSwitchElement" id="c3" type="checkbox"> <label class="Label" for="c3">Checked Switch</label> </div> <div class="DisabledSwitch"> <div class="DisabledSwitchOuter"><div class="DisabledSwitchInner"></div></div> <input class="DisabledSwitchElement" disabled id="c4" type="checkbox"> <label class="Label" for="c4" style="color:#dee1e1">Disabled Switch</label> </div> <h3 class="GuideH3">Input</h3> <div class="Input"> <input class="MediumInputField" placeholder="Medium Input Field"> </div> <div class="Input"> <input class="MediumInputFieldFocus" placeholder="Medium Input Field Focus"> <div class="InlineNoticeAlert">Inline Notice Alert</div> </div> <div class="Input"> <input class="MediumInputFieldWarning" placeholder="Medium Input Field Warning"> <div class="InlineWarningAlert">Inline Warning Alert</div> </div> <div class="Input"> <input class="MediumInputFieldError" placeholder="Medium Input Field Error"> <div class="InlineErrorAlert">Inline Error Alert</div> </div> <div class="Input"> <input class="MediumInputFieldLoading" placeholder="Medium Input Field Loading"> </div> <h3 class="GuideH3">IconInput</h3> <p class="GuideP">Current usage is limited to Login and other screens based on that design. Uses <code class="GuideCode"><IconInputField></code> and <code class="GuideCode"><SmallIcon></code>.</p> <div class="Input"> <input class="IconInputField" placeholder="Icon Input Field"> <svg class="SmallIcon" style="left:12px;position:absolute;top:12px" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> </div> <h3 class="GuideH3">LabelInput</h3> <input> <h3 class="GuideH3">Textarea</h3> <textarea class="Textarea"></textarea> <h3 class="GuideH3">Select</h3> <select> <option>Option A</option> </select> </div> </div> <div class="GuideSection"> <div class="GuideAlign"> <h2 class="GuideH2">Buttons</h2> <h2 class="GuideH3">Standard Interface</h2> <table class="Table"> <tr class="TableRow"> <th class="TableHead">Type</th> <th class="TableHead">Large</th> <th class="TableHead">Medium</th> <th class="TableHead">Small</th> <th class="TableHead">Text</th> </tr> <tr class="TableRow"> <td class="TableData">Primary</td> <td class="TableData"><button class="LargePrimaryButton">Large Primary Button</button></td> <td class="TableData"><button class="MediumPrimaryButton">Medium Primary Button</button></td> <td class="TableData"><button class="SmallPrimaryButton">Small Primary Button</button></td> <td class="TableData"><button class="TextPrimaryButton">Text Primary Button</button></td> </tr> <tr class="TableRow"> <td class="TableData">Danger</td> <td class="TableData"><button class="LargeDangerButton">Large Danger Button</button></td> <td class="TableData"><button class="MediumDangerButton">Medium Danger Button</button></td> <td class="TableData"><button class="SmallDangerButton">Small Danger Button</button></td> <td class="TableData"><button class="TextDangerButton">Text Danger Button</button></td> </tr> <tr class="TableRow"> <td class="TableData">Twitter</td> <td class="TableData"><button class="LargeTwitterButton">Large Twitter Button</button></td> <td class="TableData"><button class="MediumTwitterButton">Medium Twitter Button</button></td> <td class="TableData"><button class="SmallTwitterButton">Small Twitter Button</button></td> <td class="TableData"><button class="TextTwitterButton">Text Twitter Button</button></td> </tr> <tr class="TableRow"> <td class="TableData">Facebook</td> <td class="TableData"><button class="LargeFacebookButton">Large Facebook Button</button></td> <td class="TableData"><button class="MediumFacebookButton">Medium Facebook Button</button></td> <td class="TableData"><button class="SmallFacebookButton">Small Facebook Button</button></td> <td class="TableData"><button class="TextFacebookButton">Text Facebook Button</button></td> </tr> <tr class="TableRow"> <td class="TableData">LinkedIn</td> <td class="TableData"><button class="LargeLinkedInButton">Large LinkedIn Button</button></td> <td class="TableData"><button class="MediumLinkedInButton">Medium LinkedIn Button</button></td> <td class="TableData"><button class="SmallLinkedInButton">Small LinkedIn Button</button></td> <td class="TableData"><button class="TextLinkedInButton">Text LinkedIn Button</button></td> </tr> <tr class="TableRow"> <td class="TableData">Passive</td> <td class="TableData"><button class="LargePassiveButton">Large Passive Button</button></td> <td class="TableData"><button class="MediumPassiveButton">Medium Passive Button</button></td> <td class="TableData"><button class="SmallPassiveButton">Small Passive Button</button></td> <td class="TableData"><button class="TextPassiveButton">Text Passive Button</button></td> </tr> </table> <h2 class="GuideH3">Standard States</h2> <button class="SmallPrimaryButtonHover">Small Primary Button Hover</button> <button class="SmallPrimaryButtonDisabled">Small Primary Button Disabled</button> <button class="SmallPrimaryButtonLoading">Small Primary Button Loading</button> <button class="SmallPrimaryIconButton">Small Primary Icon Button</button> <button class="TextPrimaryButtonHover">Text Primary Button Hover</button> <button class="TextPrimaryButtonDisabled">Text Primary Button Disabled</button> <button class="TextPrimaryButtonLoading">Text Primary Button Loading</button> <h2 class="GuideH3">Limited Usage</h2> <button class="LoginToggleButton"> <svg class="SmallIcon" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <span>Login Toggle Button</span> </button> <button class="PrevPagingButton">Prev Paging Button</button> <button class="NextPagingButton">Next Paging Button</button> <button class="ExitButton"> <svg class="Medium Icon" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> </button> </div> </div> </div> </div> <div class="GuideSection"> <div class="GuideAlign"> <h2 class="GuideH2">Icons</h2> <h3 class="GuideH3">HeaderIcon</h3> <svg class="HeaderIcon" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <h3 class="GuideH3">LargeIcon</h3> <svg class="LargeIcon" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <h3 class="GuideH3">MediumIcon</h3> <svg class="MediumIcon" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> <h3 class="GuideH3">SmallIcon</h3> <svg class="SmallIcon" viewBox="0 0 100 100"> <polygon points="100,0 55.6,44.4 77.8,66.7 0,100 44.4,55.6 22.2,33.3"/> </svg> </div> </div> <div class="GuideSection"> <div class="GuideAlign"> <h2 class="GuideH2">Typography</h2> <h3 class="GuideH3">PageTitle</h3> <div class="PageTitle">Example Page Title</div> <h3 class="GuideH3">SubtleSmallCaps</h3> <div class="SubtleSmallCaps">Subtle Small Caps</div> <h3 class="GuideH3">StoryTitle</h3> <div class="StoryTitle">Story Title</div> <h3 class="GuideH3">StoryExcerpt</h3> <div class="StoryExcerpt">Story Excerpt</div> <h3 class="GuideH3">Label</h3> <div class="Label">Label</div> <div class="report-GuideSection-heading"></div> <div class="truncate-wrapper"></div> <div class="hero smallcaps"></div> <div class="subtle small caps"></div> <div class="normal small caps"></div> <div class="subtle medium caps"></div> <div class="text"></div> <div class="hero-title"></div> </div> </div> <div class="GuideSection"> <div class="GuideAlign"> <h2 class="GuideH2">Prompts</h2> <h3 class="GuideH3">InlineNoticeAlert</h3> <div class="InlineNoticeAlert">Inline Notice Alert</div> <h3 class="GuideH3">InlineWarningAlert</h3> <div class="InlineWarningAlert">Inline Warning Alert</div> <h3 class="GuideH3">InlineErrorAlert</h3> <div class="InlineErrorAlert">Inline Error Alert</div> </div> </div> <div class="GuideSection"> <div class="GuideAlign"> <h2 class="GuideH2">Content</h2> <h3 class="GuideH3">Tables</h3> <table class="Table"> <tr class="TableRow"> <th class="TableHead">Size</th> <th class="TableHead">Twitter</th> <th class="TableHead">Facebook</th> <th class="TableHead">Facebook Page</th> <th class="TableHead">LinkedIn</th> </tr> <tr class="TableRow"> <td class="TableData">Large</td> <td class="TableData"></td> <td class="TableData"></td> <td class="TableData"></td> <td class="TableData"></td> </tr> <tr class="TableRow"> <td class="TableData">Medium</td> <td class="TableData"></td> <td class="TableData"></td> <td class="TableData"></td> <td class="TableData"></td> </tr> <tr class="TableRow"> <td class="TableData">Small</td> <td class="TableData"></td> <td class="TableData"></td> <td class="TableData"></td> <td class="TableData"></td> </tr> </table> <div class="large-share-count"></div> <div class="small-share-count"></div> <h3 class="GuideH3">Stories</h3> <div class="StoryBadge">Story Badge</div> <div class="active-story"></div> <div class="draft-story"></div> <div class="preview-story-(editable)"></div> <div class="meta-story"></div> <div class="hero"></div> <div class="admin-band"></div> <div class="curator-band"></div> <div class="parsed-document"></div> <div class="parsed-document"></div> <div class="tooltip"></div> <div class="Profile"></div> </div> </div> </body> </html>
https://use.typekit.net/exf4iwe.js