UNPKG

@ulu/frontend

Version:

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

github.com/Jscherbe/frontend

Jscherbe/frontend

50 lines (46 loc) • 1.88 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!-- @ulu-demo title: Basic UI Icons description: Simple geometric icons for common actions. --> <div style="font-size: 2rem; display: flex; gap: 1rem;"> <span class="css-icon css-icon--plus"></span> <span class="css-icon css-icon--minus"></span> <span class="css-icon css-icon--close"></span> <span class="css-icon css-icon--menu"></span> </div> <!-- @ulu-demo title: Navigation Icons description: Icons for directional navigation and disclosures. --> <div style="font-size: 2rem; display: flex; gap: 1rem;"> <span class="css-icon css-icon--angle-right"></span> <span class="css-icon css-icon--angle-down"></span> <span class="css-icon css-icon--arrow-right"></span> <span class="css-icon css-icon--arrow-left"></span> </div> <!-- @ulu-demo title: Stroke Weight Variation description: Use the `css-icon--stroke-large` modifier for a bolder appearance. --> <div style="font-size: 2rem; display: flex; gap: 1rem;"> <span class="css-icon css-icon--plus"></span> <span class="css-icon css-icon--plus css-icon--stroke-large"></span> <span class="css-icon css-icon--angle-right"></span> <span class="css-icon css-icon--angle-right css-icon--stroke-large"></span> </div> <!-- @ulu-demo title: Transition Icons (Active State) description: Some icons animate between states when the `is-active` class is applied. --> <div style="font-size: 2rem; display: flex; gap: 2rem; align-items: center;"> <div> <span class="css-icon css-icon--plus-to-minus"></span> <span class="css-icon css-icon--plus-to-minus is-active"></span> <span class="type-small" style="display: block;">Plus-to-Minus</span> </div> <div> <span class="css-icon css-icon--menu-to-close"></span> <span class="css-icon css-icon--menu-to-close is-active"></span> <span class="type-small" style="display: block;">Menu-to-Close</span> </div> </div>