{ "note": "The i80 Design System as Web Components. Load components.css and i80.js, then write these tags. Your page needs *, *::before, *::after { box-sizing: border-box }. An element ignores an attribute it does not know, so use the ones listed here.", "css": "https://design.i80.dk/v/0.5.2/components.css", "script": "https://design.i80.dk/v/0.5.2/i80.js", "docs": "https://design.i80.dk/elements/", "components": [ { "tag": "i80-button", "title": "Button", "description": "An action. Renders a real " ], "attributes": [ { "name": "color", "values": "primary · secondary · tertiary · critical", "default": "primary", "notes": "Visual weight." }, { "name": "size", "values": "small · medium · large", "default": "medium", "notes": "" }, { "name": "icon", "values": "icon name", "default": "", "notes": "Flight icon, see the icon library." }, { "name": "icon-position", "values": "leading · trailing", "default": "leading", "notes": "" }, { "name": "icon-only", "values": "boolean", "default": "", "notes": "Shows only the icon; the text becomes the aria-label." }, { "name": "full-width", "values": "boolean", "default": "", "notes": "Fills the parent's width." }, { "name": "href", "values": "URL", "default": "", "notes": "Renders a link instead of a button." }, { "name": "external", "values": "boolean", "default": "", "notes": "With href: opens in a new tab." }, { "name": "type", "values": "button · submit · reset", "default": "button", "notes": "For the created \n \n" ], "attributes": [ { "name": "text", "values": "text", "default": "", "notes": "The toggle's label." }, { "name": "color", "values": "primary · secondary", "default": "primary", "notes": "" }, { "name": "size", "values": "small · medium", "default": "medium", "notes": "" }, { "name": "icon", "values": "icon name", "default": "", "notes": "Icon before the text." }, { "name": "position", "values": "bottom-right · bottom-left · top-right · top-left", "default": "bottom-right", "notes": "Where the list opens." }, { "name": "width / height", "values": "CSS length", "default": "", "notes": "Fixed width, maximum height." }, { "name": "match-toggle-width", "values": "boolean", "default": "", "notes": "" }, { "name": "inline", "values": "boolean", "default": "", "notes": "Sits in a line of text instead of on its own." }, { "name": "open", "values": "boolean", "default": "", "notes": "Open initially. Methods: show(), hide(). Events: i80-open, i80-close." }, { "name": "i80-dropdown-item", "values": "href · icon · trailing-icon · color (action · critical) · disabled · keep-open", "default": "", "notes": "One entry." } ] }, { "tag": "i80-text-input", "title": "Text Input", "description": "A labelled text field with helper text and error. Renders a real ; an you write inside (e.g. Django's {{ form.email }}) is kept. type=\"password\" gets a show/hide button.", "examples": [ "", "", "", "\n \n" ], "attributes": [ { "name": "label", "values": "text", "default": "", "notes": "Linked to the input." }, { "name": "helper-text", "values": "text", "default": "", "notes": "Linked with aria-describedby." }, { "name": "error", "values": "text", "default": "", "notes": "Shows the error and marks the input invalid." }, { "name": "required / optional", "values": "boolean", "default": "", "notes": "Adds the Required badge or (Optional)." }, { "name": "type", "values": "text · email · password · search · tel · url · number · date …", "default": "text", "notes": "" }, { "name": "name, value, placeholder, autocomplete, minlength, maxlength, pattern, min, max, step, inputmode, list, form", "values": "", "default": "", "notes": "Passed to the created ." }, { "name": "width", "values": "CSS length", "default": "", "notes": "" }, { "name": "no-visibility-toggle", "values": "boolean", "default": "", "notes": "Password without the show/hide button." }, { "name": "aria-describedby", "values": "id list", "default": "", "notes": "Merged with the helper text and error ids the element links." } ] }, { "tag": "i80-textarea", "title": "Textarea", "description": "A labelled multi-line field. Same field attributes as Text Input.", "examples": [ "" ], "attributes": [ { "name": "label, helper-text, error, invalid, required, optional, disabled, readonly", "values": "", "default": "", "notes": "As Text Input." }, { "name": "name, value, placeholder, autocomplete, minlength, maxlength", "values": "", "default": "", "notes": "Passed to the created \n \n", "\n \n \n", "\n
Only your team can see it.
\n" ], "attributes": [ { "name": "label", "values": "text", "default": "", "notes": "The field's label, linked to the control with for." }, { "name": "helper-text", "values": "text", "default": "", "notes": "Linked to the control with aria-describedby." }, { "name": "error", "values": "text", "default": "", "notes": "One error message; marks the control invalid." }, { "name": "required / optional", "values": "boolean", "default": "", "notes": "Adds the Required badge or (Optional) after the label or legend." }, { "name": "invalid", "values": "boolean", "default": "", "notes": "Marks the control invalid without a message." }, { "name": "layout", "values": "vertical · flag", "default": "vertical", "notes": "flag puts the control before the label, as a checkbox does." }, { "name": "i80-form-fieldset", "values": "legend · helper-text · error · required · optional · layout (vertical · horizontal) · name", "default": "", "notes": "A
around several fields, with a legend." }, { "name": "i80-form-error", "values": "for · message", "default": "", "notes": "An error block with its icon. Each

inside is one message; for=\"control-id\" gives it the id the control's aria-describedby expects." }, { "name": "i80-form-character-count", "values": "for · min-length · max-length · message · value", "default": "", "notes": "Counts the control with that id as the user types. message takes {currentLength}, {minLength}, {maxLength}, {remaining} and {shortfall}." } ] }, { "tag": "i80-code-block", "title": "Code Block", "description": "A block of code: line numbers, an optional title and description, a copy button, and a height toggle when it is taller than max-height. The code is the text inside the tag — its indentation is removed, so the example can sit where it belongs in your HTML — or the value attribute for a single line. There is no syntax highlighting: the code is shown exactly as you wrote it. Add a highlighter of your own where a page needs one.", "examples": [ "aws ec2 --region us-west-1 accept-vpc-peering-connection", "\n package main\n import fmt\n func main() {\n fmt.Println(helloWorld)\n }\n", "\n def convert_object_to_array(obj)\n arr = obj.keys\n .map { |key| [key, obj[key]] }\n .flatten\n .sort\n return arr\n end\n" ], "attributes": [ { "name": "value", "values": "text", "default": "", "notes": "The code, for a single line. Otherwise it is the text inside the tag." }, { "name": "title", "values": "text", "default": "", "notes": "A title above the code." }, { "name": "title-tag", "values": "p · h1 … h6", "default": "p", "notes": "The title's element. Pick the heading level the page structure asks for." }, { "name": "description", "values": "text", "default": "", "notes": "A line under the title." }, { "name": "language", "values": "bash · go · hcl · json · log · ruby · shell-session · yaml", "default": "", "notes": "Adds the language- class a highlighter keys off. It does not highlight anything by itself." }, { "name": "line-numbers", "values": "boolean", "default": "true", "notes": "line-numbers=\"false\" hides the gutter. The numbers count lines of code, so with line-wrapping they stop matching the rows on screen." }, { "name": "line-number-start", "values": "number", "default": "1", "notes": "The number the first line gets." }, { "name": "line-wrapping", "values": "boolean", "default": "", "notes": "Wraps long lines instead of scrolling sideways." }, { "name": "standalone", "values": "boolean", "default": "true", "notes": "standalone=\"false\" drops the rounded corners, for a block flush inside another box." }, { "name": "max-height", "values": "CSS length", "default": "", "notes": "Caps the height: the code scrolls, and a button expands it. Property: expanded. Method: toggle(). Event: i80-toggle with detail.expanded." }, { "name": "copy-button", "values": "boolean", "default": "", "notes": "Adds the that copies the code." }, { "name": "copy-button-text", "values": "text", "default": "Copy", "notes": "Its accessible name — say what is being copied when there is more than one on the page." }, { "name": "copied-message", "values": "text", "default": "Copied to clipboard", "notes": "What the copy button announces." }, { "name": "label", "values": "text", "default": "", "notes": "The code's accessible name, when there is no title to name it." }, { "name": "labelled-by", "values": "id", "default": "the title", "notes": "Names the code from other text on the page." }, { "name": "described-by", "values": "id", "default": "the description", "notes": "Points the code's aria-describedby at other text on the page." } ] }, { "tag": "i80-rich-tooltip", "title": "Rich Tooltip", "description": "A tooltip that holds real content — a heading, a paragraph, a link — instead of a string. The toggle is text with a dotted underline and an optional icon; everything else you write inside is the bubble. Hover and focus open it, or trigger=\"click\" asks for a click; Escape and a click outside close it, because the bubble is a native popover. For a plain string, use .", "examples": [ "\n Who can see this plan?\n Everyone on the team, and anyone you share the link with.\n", "Lorem Some titleSome descriptive information sit amet consectetur adipiscing elit.", "\n Invoices are sent on the first of the month.\n Read the billing docs\n", "\n My text tag\n A toggle of your own, when the standard one does not fit.\n" ], "attributes": [ { "name": "text", "values": "text", "default": "", "notes": "The toggle's text, underlined with dots." }, { "name": "icon", "values": "icon name", "default": "", "notes": "An icon next to the text, at the text's size." }, { "name": "icon-position", "values": "leading · trailing", "default": "trailing", "notes": "" }, { "name": "size", "values": "small · medium · large", "default": "", "notes": "A typographic style for the toggle; without it the toggle inherits the surrounding text. Only applies when there is text." }, { "name": "inline", "values": "boolean", "default": "", "notes": "The toggle sits in a line of text instead of on its own." }, { "name": "trigger", "values": "hover · click", "default": "hover", "notes": "hover opens it on hover and on focus; click asks for a click." }, { "name": "open", "values": "boolean", "default": "", "notes": "Open on page load. It is also written back when the bubble opens or closes. Property: open. Methods: show(), hide(). Events: i80-open, i80-close." }, { "name": "placement", "values": "top · bottom · left · right (each also -start and -end)", "default": "bottom", "notes": "Where the bubble goes when there is room." }, { "name": "offset", "values": "number", "default": "12", "notes": "Pixels between the toggle and the bubble." }, { "name": "collision-detection", "values": "true · false · flip · shift · auto", "default": "true", "notes": "How the bubble avoids the window edge: true is flip and shift together, auto picks the side with most room, false pins it." }, { "name": "width", "values": "CSS length", "default": "", "notes": "A fixed width instead of fitting the content (which caps at 280px)." }, { "name": "height", "values": "CSS length", "default": "", "notes": "A fixed height." }, { "name": "slot=\"toggle\"", "values": "on a child", "default": "", "notes": "That child becomes the toggle instead of the text and icon, and its accessibility is then yours." } ] }, { "tag": "i80-time", "title": "Time", "description": "A real