Cards are plain article elements.
Components
One tab per component. Each example has a Preview and a Code view generated from the same source. Deep links work, e.g. #c-modal. Mermaid, Text editor, Code and Icons load from a CDN and need network.
Heading 1
Heading 2
Heading 3
Paragraph with a link, strong, em, mark, Ctrl, code and small text.
A blockquote.
The quick brown fox jumps over the lazy dog. 0123456789
MS.fonts; // ['auto','system','inter','roboto', ...]
MS.set({ font: 'inter' });
MS.get().font; // 'inter'
MS.set({ font: 'auto' }, el); // scoped: sets --ms-font on el only| Name | Role | Score |
|---|---|---|
| Ada | Engineer | 98 |
| Linus | Maintainer | 91 |
| Grace | Admiral | 99 |
| # | Name | Role |
|---|---|---|
| 1 | Ada | Admin |
| 2 | Linus | Dev |
| 3 | Grace | Dev |
| 4 | Alan | QA |
| 5 | Edsger | Dev |
| 6 | Barbara | PM |
First
Opens by default.
Second
Opening this closes the first.
Third
No JavaScript.
OR
LeftMiddleRight
Heads up. Default alert.
Saved successfully.
Careful, this is risky.
Something failed.
FYI.
SavedYour changes were stored.
Disk space is low.
FailedCould not reach the server.
Plain info alert without an icon.
Heads up, this can be dismissed.
Tag
Overview panel.
Details panel.
Reviews panel.
- Alpha
- Bravo
- Charlie
- Delta
- ⠿ Write docs
- ⠿ Ship it
- ⠿ Celebrate
Placed beside the trigger.
Hover content
ABCDEF+3 ON BY AW OF
- Account
- Profile
- Confirm
Slide 1
Slide 2
Slide 3
Slide 4
Slide 1
Slide 2
Slide 3
Slide 4
grid 1
grid 2
grid 3
col
col
Title
OneTwo
graph TD
A[Start] --> B{Ready?}
B -->|Yes| C[Ship it]
B -->|No| D[Fix]
D --> B
sequenceDiagram
participant U as User
participant A as App
U->>A: Click save
A-->>U: Toast: Saved
stateDiagram-v2
[*] --> Idle
Idle --> Loading: fetch
Loading --> Done: ok
Loading --> Error: fail
Error --> Idle: retry
Done --> [*]
pie title Pets
"Dogs" : 40
"Cats" : 35
"Fish" : 25
HTML:
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.30.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="multistyle.min.js"></script>// themed by the active style, theme and mode
export function greet(name = "world") {
return `Hello, ${name}!`;
}.card { color: var(--ms-c-primary); padding: 1rem; }npm install multistyle-ui && npm run build