2 unit-text
The text unit.
2.1 Core
The core module.
2.1.1 Default style
The default style.
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<h1 class="unit-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
<p class="unit-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>2.1.2 Default link style
The default link style.
default
<h1 class="unit-text">Lorem ipsum dolor <a class="unit-text__link" href="#">sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
<p class="unit-text">あの<a class="unit-text__link" href="#">イーハトーヴォ</a>のすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>2.2 Inline
The inline module.
2.2.1 Modifiers
The inline modifiers.
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
unit-text--inline-true
Enable inline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
unit-text--inline-block
Enable inline-block
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<h1 class="unit-text {{modifier_class}}">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h1>
<p class="unit-text {{modifier_class}}">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>2.3 Type
The type module.
2.3.1 Modifiers
The additional modifiers.
default
unit-text--type-example-a
Example a type (Type:
svg)unit-text--type-example-b
Example b type (Type:
svg, Options: responsive: true)unit-text--type-example-c
Example c type (Type:
image, Options: use2x: true)unit-text--type-example-d
Example d type (Type:
image, Options: responsive: true, use2x: "sm")<!-- single -->
<span class="unit-text {{modifier_class}}">LOREM IPSUM</span>
<!-- a child -->
<a href="javascript:;">
<span class="unit-text {{modifier_class}}">LOREM IPSUM</span>
</a>
<!-- a child (current) -->
<a class="is-current" href="javascript:;">
<span class="unit-text {{modifier_class}}">LOREM IPSUM</span>
</a>
<!-- button child (disabled) -->
<button disabled="disabled">
<span class="unit-text {{modifier_class}}">LOREM IPSUM</span>
</button>