Component Docs
Text コンポーネント
テキストデコレーションの基本スタイルを提供します。
.text-base
バリアント
Highlight
ハイライトされたテキスト.text-highlight コンポーネントカラーを使用して、微妙な背景ハイライトを適用します。marker-fullに似ていますが、異なるスタイル設定が可能です。
Marker
マーカー付きテキスト.text-marker コンポーネントカラーを使用して、テキスト背景の下部に蛍光ペン効果を適用します。
Marker Double
二重マーカーテキスト.text-marker-double コンポーネントカラーを使用して、二重線のマーカー効果を適用します。
Marker Full
全面マーカーテキスト.text-marker-full コンポーネントカラーを使用して、テキスト背景全体に蛍光ペン効果を適用します。
Marker Stripe
ストライプマーカー.text-marker-stripe コンポーネントカラーを使用して、テキスト下部にストライプ状のマーカー効果を適用します。
Quote
これは引用です。
.text-quote コンポーネントカラーを使用して、テキスト（通常は引用）に左ボーダーを適用します。
Underline
下線付きテキスト.text-underline コンポーネントカラーを使用して、標準的な実線の下線を適用します。
Underline Dashed
破線下線.text-underline-dashed コンポーネントカラーを使用して、破線の下線を適用します。
Underline Dotted
点線下線.text-underline-dotted コンポーネントカラーを使用して、点線の下線を適用します。
Underline Thick
太線下線.text-underline-thick コンポーネントカラーを使用して、太い実線の下線を適用します。
Underline Wavy
波線下線.text-underline-wavy コンポーネントカラーを使用して、波線の下線を適用します。
使用例
マーカー付きテキスト
<span class="text-marker theme-primary">マーカー付きテキスト</span>
全面マーカーテキスト
<span class="text-marker-full theme-secondary">全面マーカーテキスト</span>
ストライプマーカー
<span class="text-marker-stripe theme-accent">ストライプマーカー</span>
二重マーカーテキスト
<span class="text-marker-double theme-primary">二重マーカーテキスト</span>
下線付きテキスト
<span class="text-underline theme-primary">下線付きテキスト</span>
点線下線
<span class="text-underline-dotted theme-secondary">点線下線</span>
破線下線
<span class="text-underline-dashed theme-accent">破線下線</span>
波線下線
<span class="text-underline-wavy theme-neutral">波線下線</span>
太線下線
<span class="text-underline-thick theme-primary">太線下線</span>
これは引用です。
<p class="text-quote theme-neutral">これは引用です。</p>
ハイライトされたテキスト
<span class="text-highlight theme-accent">ハイライトされたテキスト</span>
ベースデコレーション
<span class="text-base">ベースデコレーション</span>