Text

Detail
Basic
Dark
Light
Role
Weight
Line Height
Transform
Align
Vertical Align
Wrap
Link
Blockquote
Code
Variables
Mixins
Sources

Detail

テキストを装飾するエレメント CSS。

Basic

Selector	Description
`.text`	テキスト装飾の起点として使うセレクター。

Dark

.is-dark-(value) 形式のモディファイアを .text に付与すると黒文字を表現。(value) を省略すると最も濃く、1 > 9 の順に薄くなります。

(value) は Color の値を引き継いでいます。

ダークダークダークダークダークダークダークダークダークダーク

<span class="text is-dark">ダーク</span>
<span class="text is-dark-1">ダーク</span>
<span class="text is-dark-2">ダーク</span>
<span class="text is-dark-3">ダーク</span>
<span class="text is-dark-4">ダーク</span>
<span class="text is-dark-5">ダーク</span>
<span class="text is-dark-6">ダーク</span>
<span class="text is-dark-7">ダーク</span>
<span class="text is-dark-8">ダーク</span>
<span class="text is-dark-9">ダーク</span>

Darkest	Dark 1	Dark 2	Dark 3	Dark 4	Dark 5	Dark 6	Dark 7	Dark 8	Dark 9
`.is-dark`	`.is-dark-1`	`.is-dark-2`	`.is-dark-3`	`.is-dark-4`	`.is-dark-5`	`.is-dark-6`	`.is-dark-7`	`.is-dark-8`	`.is-dark-9`

Light

.is-light-(value) 形式のモディファイアを .text に付与すると白文字を表現。(value) を省略すると最も濃く、1 > 9 の順に薄くなります。

(value) は Color の値を引き継いでいます。

ライトライトライトライトライトライトライトライトライトライト

<span class="text is-light">ライト</span>
<span class="text is-light-1">ライト</span>
<span class="text is-light-2">ライト</span>
<span class="text is-light-3">ライト</span>
<span class="text is-light-4">ライト</span>
<span class="text is-light-5">ライト</span>
<span class="text is-light-6">ライト</span>
<span class="text is-light-7">ライト</span>
<span class="text is-light-8">ライト</span>
<span class="text is-light-9">ライト</span>

Brightest	Light 1	Light 2	Light 3	Light 4	Light 5	Light 6	Light 7	Light 8	Light 9
`.is-light`	`.is-light-1`	`.is-light-2`	`.is-light-3`	`.is-light-4`	`.is-light-5`	`.is-light-6`	`.is-light-7`	`.is-light-8`	`.is-light-9`

Role

.is-(role) 形式のモディファイアを .text に付与すると、各役割毎のカラーリングに変化します。

基本です重要かも情報あり成功した注意する禁止する

<span class="text">基本です</span>
<span class="text is-primary">重要かも</span>
<span class="text is-info">情報あり</span>
<span class="text is-success">成功した</span>
<span class="text is-warning">注意する</span>
<span class="text is-danger">禁止する</span>

Primary	Info	Success	Warning	Danger
`.is-primary`	`.is-info`	`.is-success`	`.is-warning`	`.is-danger`

Weight

.is-weight-(value) 形式のモディファイアを .text に付与すると文字の太さが変化。

(value) は Font の値を引き継いでいます。

基本です重要かも情報あり成功した注意する禁止する

<span class="text">基本です</span>
<span class="text is-primary">重要かも</span>
<span class="text is-info">情報あり</span>
<span class="text is-success">成功した</span>
<span class="text is-warning">注意する</span>
<span class="text is-danger">禁止する</span>

Normal	Strong	W100	W200	W300	W400	W500	W600	W700	W800	W900
`.is-normal`	`.is-strong`	`.is-weight-100`	`.is-weight-200`	`.is-weight-300`	`.is-weight-400`	`.is-weight-500`	`.is-weight-600`	`.is-weight-700`	`.is-weight-800`	`.is-weight-900`

Line Height

.is-line-height-(value) 形式のモディファイアを .text に付与すると行間が変化。

(value) は Font の値を引き継いでいます。

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

<p class="text">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>

XXS	XS	Small	Medium	Large	XL	XXL
`.is-line-height-xxs`	`.is-line-height-xs`	`.is-line-height-sm`	`.is-line-height-md`	`.is-line-height-lg`	`.is-line-height-xl`	`.is-line-height-xxl`

Transform

.text に付与することで文字の表示方法を変化させるモディファイア。

セマンティックなマークアップを考えた場合、Italic 部分は <em></em>、Delete 部分は <del></del> または <s></s> にマークアップ自体を変更することが望ましいです。

Italic	Delete	Capitalize	Lowercase	Uppercase
`.is-italic`	`.is-delete`	`.is-capitalize`	`.is-lowercase`	`.is-uppercase`

Align

.text に付与することで text-align の調整ができるモディファイア。

right center left のみ Media Query に応じた変更も若干行えます。

Align

None

left

Center

Right

<p class="text">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>

Right	Center	Left
`.is-right, .is-mobile-right`	`.is-center, .is-mobile-center`	`.is-left, .is-mobile-left`
`.is-fablet-right`	`.is-fablet-center`	`.is-fablet-left`
`.is-tablet-right`	`.is-tablet-center`	`.is-tablet-left`
`.is-desktop-right`	`.is-desktop-center`	`.is-desktop-left`
`.is-wide-right`	`.is-wide-center`	`.is-wide-left`

Justify

.is-justify は両端揃えを指示します。効果が大きいテキストは欧文です。

Justify

Active

While climbing the mountain path, I thought like this. If you work on Ji, the corner will stand. It will be washed away if you let your heart stick. It's cramped if you can do it. Anyway, the world of people is hard to live. If you have difficulty living, you will want to move to a cheap place. When you realize that it is difficult to live wherever you go, poetry is born and you can paint.

<p class="text is-justify is-sm">山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</p>
<p class="text is-justify is-sm">While climbing the mountain path, I thought like this. If you work on Ji, the corner will stand. It will be washed away if you let your heart stick. It's cramped if you can do it. Anyway, the world of people is hard to live. If you have difficulty living, you will want to move to a cheap place. When you realize that it is difficult to live wherever you go, poetry is born and you can paint.</p>

Modifier	Description
`.is-justify`	文章が両端揃えになります。

Vertical Align

.text に付与することで vertical-align の調整ができるモディファイア。

小さいテキスト大きいテキスト

<span class="text">小さいテキスト</span>
<span class="text is-xl">大きいテキスト</span>

Baseline	Top	Middle	Bottom
`.is-baseline`	`.is-top`	`.is-middle`	`.is-bottom`

Wrap

.text に付与することで文章の折り返し設定ができるモディファイア。

Wrap

None

No Wrap

Break

<p class="text is-lg">While climbing the mountain path, I thought like this. If you work on Ji, the corner will stand. It will be washed away if you let your heart stick. It's cramped if you can do it. Anyway, the world of people is hard to live. If you have difficulty living, you will want to move to a cheap place. When you realize that it is difficult to live wherever you go, poetry is born and you can paint.</p>

Modifier	Description
`.is-nowrap`	文章が折り返さなくなります。
`.is-break`	文章が英単語の途中でも折り返します。

Link

.text に付与することで下線リンクの装飾を施すモディファイア。

デフォルトは border-bottom プロパティが使われていますが、Option の $option-add-style-text-link-border を false にすると、下線が text-decoration: underline; に切り替わります。

Link

Reverse

Other

Disabled

External Link

基本です重要かも情報あり成功した注意する禁止する

<a class="text is-link" href="#">基本です</a>
<a class="text is-primary is-link" href="#">重要かも</a>
<a class="text is-info is-link" href="#">情報あり</a>
<a class="text is-success is-link" href="#">成功した</a>
<a class="text is-warning is-link" href="#">注意する</a>
<a class="text is-danger is-link" href="#">禁止する</a>

Modifier	Description
`.is-link`	`.text` に付与すると下線リンク装飾。ホバーで下線は消えます。
`.is-link-reverse`	`.text` に付与するとホバーで下線が表示されるリンク装飾になります。

Blockquote

引用の「blockquote」を使う場合。border-left と background-color を用いた装飾。

<blockquote class="blockquote">引用の「blockquote」を使う場合。border-left と background-color を用いた装飾。</blockquote>

Selector	Description
`.blockquote`	引用ブロックに使うセレクター。

Code

テキストの途中にcodeを表示させる。

<p class="text">テキストの途中に<code class="code">code</code>を表示させる。</p>

.my-css { color: red; }

<pre class="pre"><code class="code">.my-css { color: red; }</code></pre>

Selector	Description
`.code`	コード表示に使うセレクター。
`.pre`	`.code` をラップしてコードブロックを作るセレクター。

Variables

CSS Variables

false

true

Name

Default Value

Compiled Value

Name
$selector-text
Default Value
.text
Compiled Value
.text
Name
$selector-blockquote
Default Value
.blockquote
Compiled Value
.blockquote
Name
$selector-code
Default Value
.code
Compiled Value
.code
Name
$selector-pre
Default Value
.pre
Compiled Value
.pre
Name
$modifier-text-dark
Default Value
.is-dark
Compiled Value
.is-dark
Name
$modifier-text-dark-1
Default Value
.is-dark-1
Compiled Value
.is-dark-1
Name
$modifier-text-dark-2
Default Value
.is-dark-2
Compiled Value
.is-dark-2
Name
$modifier-text-dark-3
Default Value
.is-dark-3
Compiled Value
.is-dark-3
Name
$modifier-text-dark-4
Default Value
.is-dark-4
Compiled Value
.is-dark-4
Name
$modifier-text-dark-5
Default Value
.is-dark-5
Compiled Value
.is-dark-5
Name
$modifier-text-dark-6
Default Value
.is-dark-6
Compiled Value
.is-dark-6
Name
$modifier-text-dark-7
Default Value
.is-dark-7
Compiled Value
.is-dark-7
Name
$modifier-text-dark-8
Default Value
.is-dark-8
Compiled Value
.is-dark-8
Name
$modifier-text-dark-9
Default Value
.is-dark-9
Compiled Value
.is-dark-9
Name
$modifier-text-light
Default Value
.is-light
Compiled Value
.is-light
Name
$modifier-text-light-1
Default Value
.is-light-1
Compiled Value
.is-light-1
Name
$modifier-text-light-2
Default Value
.is-light-2
Compiled Value
.is-light-2
Name
$modifier-text-light-3
Default Value
.is-light-3
Compiled Value
.is-light-3
Name
$modifier-text-light-4
Default Value
.is-light-4
Compiled Value
.is-light-4
Name
$modifier-text-light-5
Default Value
.is-light-5
Compiled Value
.is-light-5
Name
$modifier-text-light-6
Default Value
.is-light-6
Compiled Value
.is-light-6
Name
$modifier-text-light-7
Default Value
.is-light-7
Compiled Value
.is-light-7
Name
$modifier-text-light-8
Default Value
.is-light-8
Compiled Value
.is-light-8
Name
$modifier-text-light-9
Default Value
.is-light-9
Compiled Value
.is-light-9
Name
$modifier-text-primary
Default Value
.is-primary
Compiled Value
.is-primary
Name
$modifier-text-info
Default Value
.is-info
Compiled Value
.is-info
Name
$modifier-text-success
Default Value
.is-success
Compiled Value
.is-success
Name
$modifier-text-warning
Default Value
.is-warning
Compiled Value
.is-warning
Name
$modifier-text-danger
Default Value
.is-danger
Compiled Value
.is-danger
Name
$modifier-text-weight-normal
Default Value
.is-normal
Compiled Value
.is-normal
Name
$modifier-text-weight-strong
Default Value
.is-strong
Compiled Value
.is-strong
Name
$modifier-text-weight-100
Default Value
.is-weight-100
Compiled Value
.is-weight-100
Name
$modifier-text-weight-200
Default Value
.is-weight-200
Compiled Value
.is-weight-200
Name
$modifier-text-weight-300
Default Value
.is-weight-300
Compiled Value
.is-weight-300
Name
$modifier-text-weight-400
Default Value
.is-weight-400
Compiled Value
.is-weight-400
Name
$modifier-text-weight-500
Default Value
.is-weight-500
Compiled Value
.is-weight-500
Name
$modifier-text-weight-600
Default Value
.is-weight-600
Compiled Value
.is-weight-600
Name
$modifier-text-weight-700
Default Value
.is-weight-700
Compiled Value
.is-weight-700
Name
$modifier-text-weight-800
Default Value
.is-weight-800
Compiled Value
.is-weight-800
Name
$modifier-text-weight-900
Default Value
.is-weight-900
Compiled Value
.is-weight-900
Name
$modifier-text-line-height-xxl
Default Value
.is-line-height-xxl
Compiled Value
.is-line-height-xxl
Name
$modifier-text-line-height-xl
Default Value
.is-line-height-xl
Compiled Value
.is-line-height-xl
Name
$modifier-text-line-height-lg
Default Value
.is-line-height-lg
Compiled Value
.is-line-height-lg
Name
$modifier-text-line-height-md
Default Value
.is-line-height-md
Compiled Value
.is-line-height-md
Name
$modifier-text-line-height-sm
Default Value
.is-line-height-sm
Compiled Value
.is-line-height-sm
Name
$modifier-text-line-height-xs
Default Value
.is-line-height-xs
Compiled Value
.is-line-height-xs
Name
$modifier-text-line-height-xxs
Default Value
.is-line-height-xxs
Compiled Value
.is-line-height-xxs
Name
$modifier-text-italic
Default Value
.is-italic
Compiled Value
.is-italic
Name
$modifier-text-delete
Default Value
.is-delete
Compiled Value
.is-delete
Name
$modifier-text-capitalize
Default Value
.is-capitalize
Compiled Value
.is-capitalize
Name
$modifier-text-lowercase
Default Value
.is-lowercase
Compiled Value
.is-lowercase
Name
$modifier-text-uppercase
Default Value
.is-uppercase
Compiled Value
.is-uppercase
Name
$modifier-text-right
Default Value
.is-right
Compiled Value
.is-right
Name
$modifier-text-center
Default Value
.is-center
Compiled Value
.is-center
Name
$modifier-text-left
Default Value
.is-left
Compiled Value
.is-left
Name
$modifier-text-mobile-right
Default Value
.is-mobile-right
Compiled Value
.is-mobile-right
Name
$modifier-text-mobile-center
Default Value
.is-mobile-center
Compiled Value
.is-mobile-center
Name
$modifier-text-mobile-left
Default Value
.is-mobile-left
Compiled Value
.is-mobile-left
Name
$modifier-text-fablet-right
Default Value
.is-fablet-right
Compiled Value
.is-fablet-right
Name
$modifier-text-fablet-center
Default Value
.is-fablet-center
Compiled Value
.is-fablet-center
Name
$modifier-text-fablet-left
Default Value
.is-fablet-left
Compiled Value
.is-fablet-left
Name
$modifier-text-tablet-right
Default Value
.is-tablet-right
Compiled Value
.is-tablet-right
Name
$modifier-text-tablet-center
Default Value
.is-tablet-center
Compiled Value
.is-tablet-center
Name
$modifier-text-tablet-left
Default Value
.is-tablet-left
Compiled Value
.is-tablet-left
Name
$modifier-text-desktop-right
Default Value
.is-desktop-right
Compiled Value
.is-desktop-right
Name
$modifier-text-desktop-center
Default Value
.is-desktop-center
Compiled Value
.is-desktop-center
Name
$modifier-text-desktop-left
Default Value
.is-desktop-left
Compiled Value
.is-desktop-left
Name
$modifier-text-wide-right
Default Value
.is-wide-right
Compiled Value
.is-wide-right
Name
$modifier-text-wide-center
Default Value
.is-wide-center
Compiled Value
.is-wide-center
Name
$modifier-text-wide-left
Default Value
.is-wide-left
Compiled Value
.is-wide-left
Name
$modifier-text-justify
Default Value
.is-justify
Compiled Value
.is-justify
Name
$modifier-text-baseline
Default Value
.is-baseline
Compiled Value
.is-baseline
Name
$modifier-text-top
Default Value
.is-top
Compiled Value
.is-top
Name
$modifier-text-middle
Default Value
.is-middle
Compiled Value
.is-middle
Name
$modifier-text-bottom
Default Value
.is-bottom
Compiled Value
.is-bottom
Name
$modifier-text-nowrap
Default Value
.is-nowrap
Compiled Value
.is-nowrap
Name
$modifier-text-break
Default Value
.is-break
Compiled Value
.is-break
Name
$modifier-text-link
Default Value
.is-link
Compiled Value
.is-link
Name
$modifier-text-link-reverse
Default Value
.is-link-reverse
Compiled Value
.is-link-reverse
Name
$modifier-text-disabled
Default Value
.is-disabled
Compiled Value
.is-disabled
Name
$text-dark
Default Value
$convert-dark
Compiled Value
black
Name
$text-dark-1
Default Value
$convert-dark-1
Compiled Value
rgba(0, 0, 0, 0.87)
Name
$text-dark-2
Default Value
$convert-dark-2
Compiled Value
rgba(0, 0, 0, 0.7)
Name
$text-dark-3
Default Value
$convert-dark-3
Compiled Value
rgba(0, 0, 0, 0.6)
Name
$text-dark-4
Default Value
$convert-dark-4
Compiled Value
rgba(0, 0, 0, 0.5)
Name
$text-dark-5
Default Value
$convert-dark-5
Compiled Value
rgba(0, 0, 0, 0.4)
Name
$text-dark-6
Default Value
$convert-dark-6
Compiled Value
rgba(0, 0, 0, 0.26)
Name
$text-dark-7
Default Value
$convert-dark-7
Compiled Value
rgba(0, 0, 0, 0.15)
Name
$text-dark-8
Default Value
$convert-dark-8
Compiled Value
rgba(0, 0, 0, 0.12)
Name
$text-dark-9
Default Value
$convert-dark-9
Compiled Value
rgba(0, 0, 0, 0.05)
Name
$text-light
Default Value
$convert-light
Compiled Value
white
Name
$text-light-1
Default Value
$convert-light-1
Compiled Value
rgba(255, 255, 255, 0.87)
Name
$text-light-2
Default Value
$convert-light-2
Compiled Value
rgba(255, 255, 255, 0.7)
Name
$text-light-3
Default Value
$convert-light-3
Compiled Value
rgba(255, 255, 255, 0.6)
Name
$text-light-4
Default Value
$convert-light-4
Compiled Value
rgba(255, 255, 255, 0.5)
Name
$text-light-5
Default Value
$convert-light-5
Compiled Value
rgba(255, 255, 255, 0.4)
Name
$text-light-6
Default Value
$convert-light-6
Compiled Value
rgba(255, 255, 255, 0.26)
Name
$text-light-7
Default Value
$convert-light-7
Compiled Value
rgba(255, 255, 255, 0.15)
Name
$text-light-8
Default Value
$convert-light-8
Compiled Value
rgba(255, 255, 255, 0.12)
Name
$text-light-9
Default Value
$convert-light-9
Compiled Value
rgba(255, 255, 255, 0.05)
Name
$text-primary
Default Value
$convert-primary-strong
Compiled Value
#37b0be
Name
$text-info
Default Value
$convert-info-strong
Compiled Value
#4b9bd8
Name
$text-success
Default Value
$convert-success-strong
Compiled Value
#2ca52c
Name
$text-warning
Default Value
$convert-warning-strong
Compiled Value
#ec8313
Name
$text-danger
Default Value
$convert-danger-strong
Compiled Value
#db5757
Name
$text-weight-normal
Default Value
$font-weight-normal
Compiled Value
400
Name
$text-weight-strong
Default Value
$font-weight-strong
Compiled Value
700
Name
$text-weight-100
Default Value
$font-weight-100
Compiled Value
100
Name
$text-weight-200
Default Value
$font-weight-200
Compiled Value
200
Name
$text-weight-300
Default Value
$font-weight-300
Compiled Value
300
Name
$text-weight-400
Default Value
$font-weight-400
Compiled Value
400
Name
$text-weight-500
Default Value
$font-weight-500
Compiled Value
500
Name
$text-weight-600
Default Value
$font-weight-600
Compiled Value
600
Name
$text-weight-700
Default Value
$font-weight-700
Compiled Value
700
Name
$text-weight-800
Default Value
$font-weight-800
Compiled Value
800
Name
$text-weight-900
Default Value
$font-weight-900
Compiled Value
900
Name
$text-line-height-xxl
Default Value
$line-height-xxl
Compiled Value
2
Name
$text-line-height-xl
Default Value
$line-height-xl
Compiled Value
1.9
Name
$text-line-height-lg
Default Value
$line-height-lg
Compiled Value
1.75
Name
$text-line-height-md
Default Value
$line-height-md
Compiled Value
1.5
Name
$text-line-height-sm
Default Value
$line-height-sm
Compiled Value
1.375
Name
$text-line-height-xs
Default Value
$line-height-xs
Compiled Value
1.25
Name
$text-line-height-xxs
Default Value
$line-height-xxs
Compiled Value
1
Name
$text-link-border-bottom-width
Default Value
$global-border-width
Compiled Value
1px
Name
$text-link-border-bottom-style
Default Value
solid
Compiled Value
solid
Name
$text-disabled-color
Default Value
$convert-disabled-color
Compiled Value
rgba(0, 0, 0, 0.26)
Name
$blockquote-background-color
Default Value
$convert-background-2
Compiled Value
whitesmoke
Name
$blockquote-border-left-width
Default Value
0.5em
Compiled Value
0.5em
Name
$blockquote-border-left-color
Default Value
$convert-background-alpha
Compiled Value
rgba(0, 0, 0, 0.05)
Name
$blockquote-border-radius
Default Value
$radius-xs
Compiled Value
2px
Name
$blockquote-padding
Default Value
1.5em
Compiled Value
1.5em
Name
$code-padding
Default Value
0.2em 0.5em
Compiled Value
0.2em 0.5em
Name
$code-background-color
Default Value
$convert-background-alpha
Compiled Value
rgba(0, 0, 0, 0.05)
Name
$code-border-radius
Default Value
$radius-xs
Compiled Value
2px
Name
$code-color
Default Value
$convert-code-color
Compiled Value
#5d69a8
Name
$code-font-size
Default Value
$font-size-sm
Compiled Value
87.5%
Name
$code-font-family
Default Value
$font-mono
Compiled Value
Menlo, Monaco, Consolas, Liberation Mono, Courier New, Meiryo, monospace, serif
Name
$pre-background-color
Default Value
$convert-background-2
Compiled Value
whitesmoke
Name
$pre-border-radius
Default Value
$radius-xs
Compiled Value
2px
Name
$pre-color
Default Value
$convert-code-color
Compiled Value
#5d69a8
Name
$pre-font-family
Default Value
$font-mono
Compiled Value
Menlo, Monaco, Consolas, Liberation Mono, Courier New, Meiryo, monospace, serif
Name
$pre-white-space
Default Value
pre
Compiled Value
pre
Name
$pre-code-padding
Default Value
1.25em 1.5em
Compiled Value
1.25em 1.5em

Mixins

musubii-style-text-dark()
musubii-style-text-dark-1()
musubii-style-text-dark-2()
musubii-style-text-dark-3()
musubii-style-text-dark-4()
musubii-style-text-dark-5()
musubii-style-text-dark-6()
musubii-style-text-dark-7()
musubii-style-text-dark-8()
musubii-style-text-dark-9()
musubii-style-text-light()
musubii-style-text-light-1()
musubii-style-text-light-2()
musubii-style-text-light-3()
musubii-style-text-light-4()
musubii-style-text-light-5()
musubii-style-text-light-6()
musubii-style-text-light-7()
musubii-style-text-light-8()
musubii-style-text-light-9()
musubii-style-text-primary()
musubii-style-text-info()
musubii-style-text-success()
musubii-style-text-warning()
musubii-style-text-danger()
musubii-style-text-weight-normal()
musubii-style-text-weight-strong()
musubii-style-text-weight-100()
musubii-style-text-weight-200()
musubii-style-text-weight-300()
musubii-style-text-weight-400()
musubii-style-text-weight-500()
musubii-style-text-weight-600()
musubii-style-text-weight-700()
musubii-style-text-weight-800()
musubii-style-text-weight-900()
musubii-style-text-line-height-xxl()
musubii-style-text-line-height-xl()
musubii-style-text-line-height-lg()
musubii-style-text-line-height-md()
musubii-style-text-line-height-sm()
musubii-style-text-line-height-xs()
musubii-style-text-line-height-xxs()
musubii-style-text-italic()
musubii-style-text-delete()
musubii-style-text-capitalize()
musubii-style-text-lowercase()
musubii-style-text-uppercase()
musubii-style-text-right()
musubii-style-text-center()
musubii-style-text-left()
musubii-style-text-justify()
musubii-style-text-baseline()
musubii-style-text-top()
musubii-style-text-middle()
musubii-style-text-bottom()
musubii-style-text-nowrap()
musubii-style-text-break()
musubii-style-text-link()
musubii-style-text-link-reverse()
musubii-style-text-disabled()
musubii-style-text-disabled-color()
musubii-style-text-link-disabled()
musubii-style-text-link-reverse-disabled()
musubii-style-text-blockquote()
musubii-style-text-code()
musubii-style-text-pre()

Sources

Document: Text / MUSUBii - GitHub Repository Source (MDX)
SCSS: Text / MUSUBii - GitHub Repository Source (SCSS)

Text

#Table of Contents

#Detail

#Basic

#Dark

#Light

#Role

#Weight

#Line Height

#Transform

#Align

#Justify

#Vertical Align

#Wrap

#Link

#Blockquote

#Code

#Variables

#Mixins

#Sources

Table of Contents

Detail

Basic

Dark

Light

Role

Weight

Line Height

Transform

Align

Justify

Vertical Align

Wrap

Link

Blockquote

Code

Variables

Mixins

Sources