mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
20 lines
No EOL
25 KiB
HTML
20 lines
No EOL
25 KiB
HTML
<!DOCTYPE html><html lang="en"><head>
|
|
<meta charset="utf-8">
|
|
<link rel="icon" href="/carbon-components-svelte/favicon.ico">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Carbon Components Svelte</title>
|
|
<link rel="stylesheet" href="/carbon-components-svelte/assets/style.cdc12fd8.css">
|
|
<style>.action-link.svelte-1viyq4q{text-align:center;align-items:center;vertical-align:middle;justify-content:center;padding-top:10px}.bx--col>h1{font-size:var(--cds-productive-heading-07-font-size);font-weight:var(--cds-productive-heading-07-font-weight);letter-spacing:var(--cds-productive-heading-07-letter-spacing);line-height:var(--cds-productive-heading-07-line-height);margin-bottom:var(--cds-layout-01)}.big-paragraph{font-size:1.5rem;font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height);margin-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-05)}.bx--col>.big-paragraph>code{font-size:var(--cds-productive-heading-03-font-size);font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height)}.big-link{font-size:1.5rem;font-weight:var(--cds-productive-heading-03-font-weight);letter-spacing:var(--cds-productive-heading-03-letter-spacing);line-height:var(--cds-productive-heading-03-line-height)}.bx--col>p>code{font-size:var(--cds-code-02-font-size);font-weight:var(--cds-code-02-font-weight);line-height:var(--cds-code-02-line-height);letter-spacing:var(--cds-code-02-letter-spacing);background-color:var(--cds-ui-03);border-radius:.25rem;padding:0 var(--cds-spacing-02)}.bx--col>h2{font-size:var(--cds-productive-heading-06-font-size);font-weight:var(--cds-productive-heading-06-font-weight);letter-spacing:var(--cds-productive-heading-06-letter-spacing);line-height:var(--cds-productive-heading-06-line-height);padding-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-01)}.bx--col>h3{font-size:var(--cds-productive-heading-04-font-size);font-weight:var(--cds-productive-heading-04-font-weight);letter-spacing:var(--cds-productive-heading-04-letter-spacing);line-height:var(--cds-productive-heading-04-line-height);padding-top:var(--cds-layout-03);margin-bottom:var(--cds-layout-02)}.bx--col>h4{font-size:var(--cds-productive-heading-02-font-size);font-weight:var(--cds-productive-heading-02-font-weight);letter-spacing:var(--cds-productive-heading-02-letter-spacing);line-height:var(--cds-productive-heading-02-line-height);padding-top:var(--cds-layout-04);margin-bottom:var(--cds-layout-01)}.bx--col>p{max-width:44rem;margin-bottom:var(--cds-layout-02)}.bx--content{background:0 0}@media(max-width:1056px){.bx--side-nav~.bx--content{margin-left:0;padding-left:1rem;padding-right:1rem}.bx--side-nav--expanded~.bx--content{white-space:nowrap;min-width:28rem}}.platform-name{display:flex;align-items:baseline}.platform-name code{margin-left:var(--cds-spacing-02);font-size:var(--cds-code-01-font-size);font-weight:var(--cds-code-01-font-weight);letter-spacing:var(--cds-code-01-letter-spacing);line-height:var(--cds-code-01-line-height);color:#c6c6c6}@media(max-width:580px){.platform-name code{display:none}}@media(min-width:1057px){.bx--side-nav__navigation{z-index:1}}.bx--side-nav__submenu[aria-expanded=true]+.bx--side-nav__menu{max-height:120rem}</style><style>.card-wrapper.svelte-t3l5k4{border-right:1px solid transparent;border-bottom:1px solid transparent}.borderRight.svelte-t3l5k4{border-right:1px solid var(--cds-ui-03)}.borderBottom.svelte-t3l5k4{border-bottom:1px solid var(--cds-ui-03)}.card.svelte-t3l5k4{display:flex;flex-direction:column;justify-content:space-between;height:100%}.card-footer.svelte-t3l5k4{display:flex;align-items:flex-end;justify-content:space-between}.title.svelte-t3l5k4{margin-top:calc(-1 * var(--cds-spacing-02));margin-bottom:var(--cds-spacing-01)}.subtitle.svelte-t3l5k4{color:var(--cds-text-02)}@media(max-width:671px){.borderRight.svelte-t3l5k4,.card-wrapper.svelte-t3l5k4{border-right:0;border-bottom:1px solid var(--cds-ui-03)}}</style><meta name="title" content="Carbon Components Svelte" data-origin="routify"><meta property="og:title" content="Carbon Components Svelte" data-origin="routify"><meta name="description" content="The Svelte implementation of the Carbon Design System featuring UI components, icons, pictograms, and charts." data-origin="routify"><meta property="og:description" content="The Svelte implementation of the Carbon Design System featuring UI components, icons, pictograms, and charts." data-origin="routify"></head>
|
|
<body style="">
|
|
<div id="app" style=""> <header role="banner" aria-label="Navigation" class="bx--header"><div slot="skip-to-content"><a href="#main-content" tabindex="0" class="bx--skip-to-content">Skip to main content</a></div> <a href="/" aria-label="Navigation" class="bx--header__name"> <span slot="platform" class="platform-name">Carbon Components Svelte <code>v0.15.0</code></span></a> <div class="bx--header__global"><a target="_blank" rel="noopener" href="https://github.com/IBM/carbon-components-svelte" class="bx--header__action action-link svelte-1viyq4q"><svg data-carbon-icon="LogoGithub20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg></a> <div><button type="button" class="bx--header__action svelte-19vx6se"><svg data-carbon-icon="AppSwitcher20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M14 4H18V8H14zM4 4H8V8H4zM24 4H28V8H24zM14 14H18V18H14zM4 14H8V18H4zM24 14H28V18H24zM14 24H18V28H14zM4 24H8V28H4zM24 24H28V28H24z"></path></svg> </button> </div></div></header> <nav class="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--expanded"><ul class="bx--side-nav__items"><li class="bx--side-nav__item"><button type="button" aria-expanded="true" class="bx--side-nav__submenu"> <span class="bx--side-nav__submenu-title">Components</span> <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"><svg data-carbon-icon="ChevronDown16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" preserveAspectRatio="xMidYMid meet" role="img" focusable="true" tabindex="0"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path><title>Open Menu</title></svg></div></button> <ul role="menu" class="bx--side-nav__menu"><li class="bx--side-nav__menu-item"><a href="/components/Accordion" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Accordion</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Breadcrumb" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Breadcrumb</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Button" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Button</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ButtonSet" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ButtonSet</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Checkbox" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Checkbox</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ClickableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ClickableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/CodeSnippet" class="bx--side-nav__link"><span class="bx--side-nav__link-text">CodeSnippet</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ComboBox" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ComboBox</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ComposedModal" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ComposedModal</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ContentSwitcher" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ContentSwitcher</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/CopyButton" class="bx--side-nav__link"><span class="bx--side-nav__link-text">CopyButton</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/DataTable" class="bx--side-nav__link"><span class="bx--side-nav__link-text">DataTable</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/DatePicker" class="bx--side-nav__link"><span class="bx--side-nav__link-text">DatePicker</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Dropdown" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Dropdown</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ExpandableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ExpandableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/FileUploader" class="bx--side-nav__link"><span class="bx--side-nav__link-text">FileUploader</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/FluidForm" class="bx--side-nav__link"><span class="bx--side-nav__link-text">FluidForm</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Form" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Form</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Grid" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Grid</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Icon" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Icon</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/InlineLoading" class="bx--side-nav__link"><span class="bx--side-nav__link-text">InlineLoading</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/InlineNotification" class="bx--side-nav__link"><span class="bx--side-nav__link-text">InlineNotification</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Link" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Link</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Loading" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Loading</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Modal" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Modal</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/MultiSelect" class="bx--side-nav__link"><span class="bx--side-nav__link-text">MultiSelect</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/NumberInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">NumberInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/OrderedList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">OrderedList</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/OverflowMenu" class="bx--side-nav__link"><span class="bx--side-nav__link-text">OverflowMenu</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Pagination" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Pagination</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/PaginationNav" class="bx--side-nav__link"><span class="bx--side-nav__link-text">PaginationNav</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/PasswordInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">PasswordInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ProgressIndicator" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ProgressIndicator</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/RadioButton" class="bx--side-nav__link"><span class="bx--side-nav__link-text">RadioButton</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/RadioTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">RadioTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Search" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Search</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Select" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Select</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SelectableTile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SelectableTile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SkeletonPlaceholder" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SkeletonPlaceholder</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/SkeletonText" class="bx--side-nav__link"><span class="bx--side-nav__link-text">SkeletonText</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Slider" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Slider</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/StructuredList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">StructuredList</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tabs" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tabs</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tag" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tag</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TextArea" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TextArea</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TextInput" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TextInput</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tile" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tile</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TimePicker" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TimePicker</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ToastNotification" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ToastNotification</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Toggle" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Toggle</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/ToggleSmall" class="bx--side-nav__link"><span class="bx--side-nav__link-text">ToggleSmall</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/Tooltip" class="bx--side-nav__link"><span class="bx--side-nav__link-text">Tooltip</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TooltipDefinition" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TooltipDefinition</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/TooltipIcon" class="bx--side-nav__link"><span class="bx--side-nav__link-text">TooltipIcon</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/UIShell" class="bx--side-nav__link"><span class="bx--side-nav__link-text">UIShell</span></a></li><li class="bx--side-nav__menu-item"><a href="/components/UnorderedList" class="bx--side-nav__link"><span class="bx--side-nav__link-text">UnorderedList</span></a></li></ul></li></ul></nav> <main id="main-content" class="bx--content"><div class="bx--grid"><div class="bx--row"><div class="bx--col"><h1>Carbon Components Svelte</h1> <p class="big-paragraph"><code>carbon-components-svelte</code> is a
|
|
<a class="big-link bx--link bx--link--inline" href="https://github.com/sveltejs/svelte">Svelte</a>
|
|
component library that implements the Carbon Design System, an
|
|
<a class="big-link bx--link bx--link--inline" href="https://www.carbondesignsystem.com/">open source design system</a>
|
|
by IBM.</p> <p>A design system can facilitate frontend development and prototyping
|
|
because it is encourages reuse, consistency, and extensibility.</p> <h3>Install</h3></div></div> <div class="bx--row bx--no-gutter" style="margin-bottom: var(--cds-layout-02);"><div class="bx--col"><div class="bx--snippet--single undefined bx--snippet"><div role="textbox" tabindex="0" aria-label="code-snippet" class="bx--snippet-container"><code><pre>yarn add -D carbon-components-svelte</pre></code></div> <button type="button" aria-live="polite" aria-label="Copy to clipboard" class="bx--copy-btn undefined bx--copy" title="Copy to clipboard"><svg data-carbon-icon="Copy16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="16" height="16" class="bx--snippet__icon" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path></svg> <span aria-hidden="true" class="bx--assistive-text bx--copy-btn__feedback">Copied!</span></button> </div></div></div> <div class="bx--row"><div class="bx--col"><h3>Portfolio</h3> <p>The broader Carbon Svelte effort extends to the icons, pictograms, and
|
|
data visualization libraries.</p></div></div> <div class="bx--row bx--no-gutter"><div class="bx--col-md-4 bx--col-lg-8 bx--col-xlg-5"><div class="card-wrapper svelte-t3l5k4 borderRight borderBottom"><div class="bx--aspect-ratio--2x1 undefined bx--aspect-ratio"><div class="bx--aspect-ratio--object"><a target="_blank" href="https://github.com/IBM/carbon-components-svelte" class="bx--tile bx--tile--clickable" style="height: 100%;"><div class="card svelte-t3l5k4"><div><h5 class="title svelte-t3l5k4">Carbon Components Svelte</h5> <div class="subtitle svelte-t3l5k4">100+ components</div></div> <div class="card-footer svelte-t3l5k4"><svg data-carbon-icon="LogoGithub32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="32" height="32" preserveAspectRatio="xMidYMid meet" style="fill: var(--cds-icon-01)" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg> <svg data-carbon-icon="Launch20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" style="fill: var(--cds-icon-01)" aria-hidden="true" focusable="false"><path d="M26,28H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4h9V6H6V26H26V17h2v9A2,2,0,0,1,26,28Z"></path><path d="M21 2L21 4 26.59 4 18 12.59 19.41 14 28 5.41 28 11 30 11 30 2 21 2z"></path></svg></div></div></a></div></div></div></div> <div class="bx--col-md-4 bx--col-lg-8 bx--col-xlg-5"><div class="card-wrapper svelte-t3l5k4 borderBottom"><div class="bx--aspect-ratio--2x1 undefined bx--aspect-ratio"><div class="bx--aspect-ratio--object"><a target="_blank" href="https://github.com/IBM/carbon-icons-svelte" class="bx--tile bx--tile--clickable" style="height: 100%;"><div class="card svelte-t3l5k4"><div><h5 class="title svelte-t3l5k4">Carbon Icons Svelte</h5> <div class="subtitle svelte-t3l5k4">5000+ icons</div></div> <div class="card-footer svelte-t3l5k4"><svg data-carbon-icon="LogoGithub32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="32" height="32" preserveAspectRatio="xMidYMid meet" style="fill: var(--cds-icon-01)" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg> <svg data-carbon-icon="Launch20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" style="fill: var(--cds-icon-01)" aria-hidden="true" focusable="false"><path d="M26,28H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4h9V6H6V26H26V17h2v9A2,2,0,0,1,26,28Z"></path><path d="M21 2L21 4 26.59 4 18 12.59 19.41 14 28 5.41 28 11 30 11 30 2 21 2z"></path></svg></div></div></a></div></div></div></div></div> <div class="bx--row bx--no-gutter"><div class="bx--col-md-4 bx--col-lg-8 bx--col-xlg-5"><div class="card-wrapper svelte-t3l5k4 borderRight"><div class="bx--aspect-ratio--2x1 undefined bx--aspect-ratio"><div class="bx--aspect-ratio--object"><a target="_blank" href="https://github.com/IBM/carbon-pictograms-svelte" class="bx--tile bx--tile--clickable" style="height: 100%;"><div class="card svelte-t3l5k4"><div><h5 class="title svelte-t3l5k4">Carbon Pictograms Svelte</h5> <div class="subtitle svelte-t3l5k4">600+ pictograms</div></div> <div class="card-footer svelte-t3l5k4"><svg data-carbon-icon="LogoGithub32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="32" height="32" preserveAspectRatio="xMidYMid meet" style="fill: var(--cds-icon-01)" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg> <svg data-carbon-icon="Launch20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" style="fill: var(--cds-icon-01)" aria-hidden="true" focusable="false"><path d="M26,28H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4h9V6H6V26H26V17h2v9A2,2,0,0,1,26,28Z"></path><path d="M21 2L21 4 26.59 4 18 12.59 19.41 14 28 5.41 28 11 30 11 30 2 21 2z"></path></svg></div></div></a></div></div></div></div> <div class="bx--col-md-4 bx--col-lg-8 bx--col-xlg-5"><div class="card-wrapper svelte-t3l5k4"><div class="bx--aspect-ratio--2x1 undefined bx--aspect-ratio"><div class="bx--aspect-ratio--object"><a target="_blank" href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte" class="bx--tile bx--tile--clickable" style="height: 100%;"><div class="card svelte-t3l5k4"><div><h5 class="title svelte-t3l5k4">Carbon Charts Svelte</h5> <div class="subtitle svelte-t3l5k4">13 chart types, powered by d3</div></div> <div class="card-footer svelte-t3l5k4"><svg data-carbon-icon="LogoGithub32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="32" height="32" preserveAspectRatio="xMidYMid meet" style="fill: var(--cds-icon-01)" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"></path></svg> <svg data-carbon-icon="Launch20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" width="20" height="20" preserveAspectRatio="xMidYMid meet" style="fill: var(--cds-icon-01)" aria-hidden="true" focusable="false"><path d="M26,28H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4h9V6H6V26H26V17h2v9A2,2,0,0,1,26,28Z"></path><path d="M21 2L21 4 26.59 4 18 12.59 19.41 14 28 5.41 28 11 30 11 30 2 21 2z"></path></svg></div></div></a></div></div></div></div></div></div></main> </div>
|
|
|
|
<script type="module" src="/carbon-components-svelte/assets/index.c2c9d961.js"></script>
|
|
|
|
|
|
</body></html> |