wispcode.github.io/c-link-block.html at main · wispcode/wispcode.github.io · GitHub

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Link-Block - Wisp CSS</title>
        <link rel="stylesheet" href="/public/styles/bundle.min.css">
        <link rel="stylesheet" href="/public/styles/custom.full.css">


    </head>
    <body>
        <div class="c-doc-layout">
            <aside id="js-menu" class="c-doc-layout__sidebar">

                <div class="c-box c-box--spacing-lg">
                    <div class="u-margin-block-end-md">
                        <a href="/" class="c-link-inline u-type-lg">
                            <strong>Home</strong>
                        </a>
                    </div>
                    <div class="u-type-lg u-margin-block-end-sm"><strong>Getting Started</strong></div>
                    <div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
                        <a class="c-link-inline" href="/guide-installing.html">Installing</a>
                        <a class="c-link-inline" href="/guide-customizing.html">Customizing</a>
                        <a class="c-link-inline" href="/guide-extending.html">Extending</a>
                    </div>

                    <div class="u-type-lg u-margin-block-end-sm"><strong>Objects</strong></div>
                    <div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
                        <a class="c-link-inline" href="/o-cluster.html">Cluster</a>
                        <a class="c-link-inline" href="/o-container.html">Container</a>
                        <a class="c-link-inline" href="/o-grid.html">Grid</a>
                        <a class="c-link-inline" href="/o-media.html">Media</a>
                        <a class="c-link-inline" href="/o-pair.html">Pair</a>
                        <a class="c-link-inline" href="/o-ratio.html">Ratio</a>
                        <a class="c-link-inline" href="/o-stack.html">Stack</a>
                        <a class="c-link-inline" href="/o-table-wrapper.html">Table Wrapper</a>
                    </div>

                    <div class="u-type-lg u-margin-block-end-sm"><strong>Components</strong></div>
                    <div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
                        <a class="c-link-inline" href="/c-badge.html">Badge</a>
                        <a class="c-link-inline" href="/c-box.html">Box</a>
                        <a class="c-link-inline" href="/c-button-group.html">Button Group</a>
                        <a class="c-link-inline" href="/c-button.html">Button</a>
                        <a class="c-link-inline" href="/c-card.html">Card</a>
                        <a class="c-link-inline" href="/c-dialog.html">Dialog</a>
                        <a class="c-link-inline" href="/c-drawer">Drawer</a>
                        <a class="c-link-inline" href="/c-input-addin.html">Input Addin</a>
                        <a class="c-link-inline" href="/c-input.html">Input</a>
                        <a class="c-link-inline" href="/c-link-block.html">Link-Block</a>
                        <a class="c-link-inline" href="/c-link-inline.html">Link-Inline</a>
                        <a class="c-link-inline" href="/c-spinner.html">Spinner</a>
                        <a class="c-link-inline" href="/c-table.html">Table</a>
                    </div>

                    <div class="u-type-lg u-margin-block-end-sm"><strong>Behaviors</strong></div>
                      <div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
                          <a class="c-link-inline" href="/b-popover.html">Popover</a>
                          <a class="c-link-inline" href="/b-press-elevate.html">Press-Elevate</a>
                          <a class="c-link-inline" href="/b-press-outline.html">Press-Outline</a>
                          <a class="c-link-inline" href="/b-press-scale.html">Press-Scale</a>
                          <a class="c-link-inline" href="/b-press-tint.html">Press-Tint</a>
                          <a class="c-link-inline" href="/b-scroll-reveal.html">Scroll-Reveal</a>
                          <a class="c-link-inline" href="/b-scroll-scale.html">Scroll-Scale</a>
                      </div>

                    <div class="u-type-lg u-margin-block-end-sm"><strong>Utilities</strong></div>
                    <div class="o-stack o-stack--gap-sm u-type-sm u-margin-block-end-md u-doc-padding-inline-start-md">
                        <a class="c-link-inline" href="/u-color.html">Color</a>
                        <a class="c-link-inline" href="/u-hidden-below.html">Hidden Below</a>
                        <a class="c-link-inline" href="/u-margin.html">Margin</a>
                        <a class="c-link-inline" href="/u-sticky.html">Sticky</a>
                        <a class="c-link-inline" href="/u-text.html">Text</a>
                        <a class="c-link-inline" href="/u-type.html">Type</a>
                        <a class="c-link-inline" href="/u-visible-below.html">Visible Below</a>
                        <a class="c-link-inline" href="/u-visually-hidden.html">Visually Hidden</a>
                        <a class="c-link-inline" href="/u-width.html">Width</a>
                    </div>

                </div>
            </aside>
            <div id="js-layout-overlay" class="c-doc-layout__overlay"></div>
            <div>
                <header class="c-box c-box--spacing-lg u-color-primary">
                    <div class="o-cluster o-cluster--align-center o-cluster--justify-between">
                        <a class="c-link-inline" href="/"><strong>Wisp CSS</strong></a>
                        <a href="https://github.com/wispcode/wisp-css/">
                            <img src="/public/images/github-logo-sm.svg" alt="GitHub Logo">
                        </a>
                    </div>
                </header>
                <main class="c-doc-layout__main">
                    <button id="js-menu-toggle" class="c-button u-margin-block-end-md u-visible-below-md"> Toggle Menu </button>
                    <div class="position:relative">
                        <h1>Link-Block </h1>
<p>Padded link pattern for navigation and tab-UI.</p>
<pre><code>&lt;div class=&quot;o-cluster u-color-neutral&quot;&gt;
	&lt;a class=&quot;c-link-block b-tint&quot; href=&quot;#&quot;&gt;Tab 1&lt;/a&gt;
	&lt;a class=&quot;c-link-block b-tint&quot; href=&quot;#&quot;&gt;Tab 2&lt;/a&gt;
	&lt;a class=&quot;c-link-block b-tint&quot; href=&quot;#&quot;&gt;Tab 3&lt;/a&gt;
&lt;/div&gt;
</code></pre>
<div class="c-doc-preview">
	<div class="o-cluster u-color-neutral">
		<a class="c-link-block b-press-tint" href="#">Tab 1</a>
		<a class="c-link-block b-press-tint" href="#">Tab 2</a>
		<a class="c-link-block b-press-tint" href="#">Tab 3</a>
	</div>
</div>
<h2>Modifiers</h2>
<h3>Spacing </h3>
<p>Applies inline padding around the link.</p>
<pre><code>&lt;div class=&quot;o-cluster u-color-neutral&quot;&gt;
	&lt;a class=&quot;c-link-block c-link-block--spacing-sm b-press-tint&quot; href=&quot;#&quot;&gt;Tab 1&lt;/a&gt;
	&lt;a class=&quot;c-link-block c-link-block--spacing-sm b-press-tint&quot; href=&quot;#&quot;&gt;Tab 2&lt;/a&gt;
	&lt;a class=&quot;c-link-block c-link-block--spacing-sm b-press-tint&quot; href=&quot;#&quot;&gt;Tab 3&lt;/a&gt;
&lt;/div&gt;
</code></pre>
<div class="c-doc-preview">
	<div class="o-cluster u-color-neutral">
		<a class="c-link-block c-link-block--spacing-sm b-press-tint" href="#">Tab 1</a>
		<a class="c-link-block c-link-block--spacing-sm b-press-tint" href="#">Tab 2</a>
		<a class="c-link-block c-link-block--spacing-sm b-press-tint" href="#">Tab 3</a>
	</div>
</div>
<pre><code>&lt;div class=&quot;o-cluster u-color-neutral&quot;&gt;
	&lt;a class=&quot;c-link-block c-link-block--spacing-lg b-press-tint&quot; href=&quot;#&quot;&gt;Tab 1&lt;/a&gt;
	&lt;a class=&quot;c-link-block c-link-block--spacing-lg b-press-tint&quot; href=&quot;#&quot;&gt;Tab 2&lt;/a&gt;
	&lt;a class=&quot;c-link-block c-link-block--spacing-lg b-press-tint&quot; href=&quot;#&quot;&gt;Tab 3&lt;/a&gt;
&lt;/div&gt;
</code></pre>
<div class="c-doc-preview">
	<div class="o-cluster u-color-neutral">
		<a class="c-link-block c-link-block--spacing-lg b-press-tint" href="#">Tab 1</a>
		<a class="c-link-block c-link-block--spacing-lg b-press-tint" href="#">Tab 2</a>
		<a class="c-link-block c-link-block--spacing-lg b-press-tint" href="#">Tab 3</a>
	</div>
</div>

                    </div>
                </main>
            </div>
        </div>
        <script src="/public/scripts/sidebar.js"></script>
        <script src="/public/scripts/demos.js"></script>
  </body>
</html>