x
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>DIVIDER:</strong> Labeled or plain section break<br> <strong>VARIANTS:</strong> Plain | Labeled | Vertical </p> <p class="tw:mb-0 tw:text-sm"> A thin hairline that separates content. Add a <code>.divider-label</code> child ("or", "OR CONTINUE WITH") to break the line with centered text — the same <code>.divider</code> class switches layout automatically. Use <code>.divider-vertical</code> between side-by-side elements such as two buttons. </p> </div> <!-- Section 1: Plain divider --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Plain</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Plain:</strong> A single hairline, full width. Use a semantic <code><hr></code> — it already carries the implicit <code>separator</code> role, so no extra ARIA is needed. </p> </div> <div class="card tw:max-w-md"> <div class="card-body"> <p class="tw:mb-3">Section one content sits above the break.</p> <hr class="divider"> <p class="tw:mt-3 tw:mb-0">Section two content sits below it.</p> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><hr class="divider"></code> </div> </div> <!-- Section 2: Labeled divider --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Labeled</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Labeled:</strong> Wrap the text in <code>.divider-label</code> inside a <code>.divider</code> container — no separator role is added, since the visible "or" text is meaningful content that should be read normally by assistive tech, not hidden behind a decorative-separator role. </p> </div> <div class="tw:space-y-6 tw:max-w-md"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Sign-in "or" break</p> <button class="btn btn-secondary btn-block" type="button"> <i class="fa-regular fa-envelope" aria-hidden="true"></i> Continue with school email </button> <div class="divider tw:my-4"> <span class="divider-label">or</span> </div> <button class="btn btn-primary btn-block" type="button">Sign in with email</button> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="divider"><span class="divider-label">or</span></div></code> </div> </div> <!-- Section 3: Vertical divider --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Vertical</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Vertical:</strong> Add <code>.divider-vertical</code> alongside <code>.divider</code> inside a flex row with <code>tw:items-stretch</code> so the hairline stretches to match the row's height — useful between two related actions (e.g. "Save" / "Save & continue"). </p> </div> <div class="tw:flex tw:items-stretch tw:gap-3"> <button class="btn btn-secondary" type="button">Save draft</button> <span class="divider divider-vertical" role="separator" aria-orientation="vertical"></span> <button class="btn btn-primary" type="button">Save & continue</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="divider divider-vertical" role="separator" aria-orientation="vertical"></span></code> </div> </div> <!-- Quick Reference --> <div class="tw:border-t tw:pt-6"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p> <p class="tw:mb-0 tw:text-xs tw:font-mono"> <strong>Base:</strong> .divider (plain hairline, or flex row when it wraps .divider-label)<br> <strong>Label:</strong> .divider-label (centered text, surface bg, neutral-700 ink)<br> <strong>Orientation:</strong> .divider-vertical (pair with .divider, use inside a tw:flex tw:items-stretch row) </p> </div> </div></div>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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>DIVIDER:</strong> Labeled or plain section break<br> <strong>VARIANTS:</strong> Plain | Labeled | Vertical </p> <p class="tw:mb-0 tw:text-sm"> A thin hairline that separates content. Add a <code>.divider-label</code> child ("or", "OR CONTINUE WITH") to break the line with centered text — the same <code>.divider</code> class switches layout automatically. Use <code>.divider-vertical</code> between side-by-side elements such as two buttons. </p> </div> <!-- Section 1: Plain divider --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Plain</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Plain:</strong> A single hairline, full width. Use a semantic <code><hr></code> — it already carries the implicit <code>separator</code> role, so no extra ARIA is needed. </p> </div> <div class="card tw:max-w-md"> <div class="card-body"> <p class="tw:mb-3">Section one content sits above the break.</p> <hr class="divider"> <p class="tw:mt-3 tw:mb-0">Section two content sits below it.</p> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><hr class="divider"></code> </div> </div> <!-- Section 2: Labeled divider --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Labeled</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Labeled:</strong> Wrap the text in <code>.divider-label</code> inside a <code>.divider</code> container — no separator role is added, since the visible "or" text is meaningful content that should be read normally by assistive tech, not hidden behind a decorative-separator role. </p> </div> <div class="tw:space-y-6 tw:max-w-md"> <div> <p class="tw:text-sm tw:font-semibold tw:mb-3">Sign-in "or" break</p> <button class="btn btn-secondary btn-block" type="button"> <i class="fa-regular fa-envelope" aria-hidden="true"></i> Continue with school email </button> <div class="divider tw:my-4"> <span class="divider-label">or</span> </div> <button class="btn btn-primary btn-block" type="button">Sign in with email</button> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="divider"><span class="divider-label">or</span></div></code> </div> </div> <!-- Section 3: Vertical divider --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Vertical</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Vertical:</strong> Add <code>.divider-vertical</code> alongside <code>.divider</code> inside a flex row with <code>tw:items-stretch</code> so the hairline stretches to match the row's height — useful between two related actions (e.g. "Save" / "Save & continue"). </p> </div> <div class="tw:flex tw:items-stretch tw:gap-3"> <button class="btn btn-secondary" type="button">Save draft</button> <span class="divider divider-vertical" role="separator" aria-orientation="vertical"></span> <button class="btn btn-primary" type="button">Save & continue</button> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="divider divider-vertical" role="separator" aria-orientation="vertical"></span></code> </div> </div> <!-- Quick Reference --> <div class="tw:border-t tw:pt-6"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-semibold">Quick Reference</p> <p class="tw:mb-0 tw:text-xs tw:font-mono"> <strong>Base:</strong> .divider (plain hairline, or flex row when it wraps .divider-label)<br> <strong>Label:</strong> .divider-label (centered text, surface bg, neutral-700 ink)<br> <strong>Orientation:</strong> .divider-vertical (pair with .divider, use inside a tw:flex tw:items-stretch row) </p> </div> </div></div>No notes provided.
No params configured.