TYPOGRAPHY
"이윰빌더에서 기본적으로 제공하는 PC BASIC 테마의 ShortCodes 입니다."
Headings
Paragraph
Color Texts
Bordered
Tooltips
Description
Unordered List
Ordered List
Unstyled List
Inline List
Cont Text Backgrounds
Cont Text Rounded
Heading Options
Headings
h1. Heading 1 Secondary text
h2. Heading 2 Secondary text
h3. Heading 3 Secondary text
h4. Heading 4 Secondary text
h5. Heading 5 Secondary text
h6. Heading 6 Secondary text
1 2 3 4 5 6 7 | <h1>h1. Heading 1 <small>Secondary text</small></h1><h2>h2. Heading 2 <small>Secondary text</small></h2><h3>h3. Heading 3 <small>Secondary text</small></h3><h4>h4. Heading 4 <small>Secondary text</small></h4><h5>h5. Heading 5 <small>Secondary text</small></h5><h6>h6. Heading 6 <small>Secondary text</small></h6> |
Paragraph
Suspendisse sit amet tellus in eros bibendum condimentum.
1 2 | <p><strong>Suspendisse sit...</strong></p> |
Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat.
1 2 | <p><em>Vivamus nisl nibh...</em></p> |
Duis enim nulla, luctus eu, dapibus lacinia, venenatis id, quam. Vestibulum imperdiet, euismod lacinia quam nisl id lorem.
1 2 | <p><small>Duis enim nulla...</small></p> |
Color Texts & Bordered
글자색상 class를 지정할 수 있습니다. color-red red 색상 color-sea sea 색상 color-blue blue 색상 color-green green 색상 color-orange orange 색상 color-purple purple 색상 color-aqua aqua 색상 color-brown brown 색상
1 2 3 4 5 6 7 8 9 | <span class="color-red">color-red</span><span class="color-sea">color-sea</span><span class="color-blue">color-blue</span><span class="color-green">color-green</span><span class="color-orange">color-orange</span><span class="color-purple">color-purple</span><span class="color-aqua">color-aqua</span><span class="color-brown">color-brown</span> |
Tooltips
Tooltip 활용입니다. tooltips 마우스 호버 시 툴팁 활성화됩니다.
1 2 | <a href="#" class="tooltips" data-toggle="tooltip" data-original-title="Default tooltip"><span class="color-red">tooltips</span></a> |
1 2 3 4 5 | <button type="button" class="tooltips btn-e btn-e-xs margin-bottom-5" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button><button type="button" class="tooltips btn-e btn-e-xs margin-bottom-5" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button><button type="button" class="tooltips btn-e btn-e-xs margin-bottom-5" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button><button type="button" class="tooltips btn-e btn-e-xs margin-bottom-5" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button> |
Description
- Description 1
- Nullam non wisi a sem semper eleifend. Donec mattis.
- Description 2
- Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.
- Aenean lectus lorem, imperdiet at, ultrices eget, ornare et.
- Description 3
- Pellentesque adipiscing purus ac magna.
1 2 3 4 5 6 7 8 9 | <dl> <dt>Description 1</dt> <dd>Nullam non wisi a sem semper eleifend. Donec mattis.</dd> <dt>Description 2</dt> <dd>Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum.</dd> <dd>Aenean lectus lorem, imperdiet at, ultrices eget, ornare et.</dd> <dt>Description 3</dt> <dd>Pellentesque adipiscing purus ac magna.</dd></dl> |
Unordered List
- Nullam non wisi a sem semper
- Semper eleifend. Donec mattis
- Duis pretium velit ac mauris
- Proin eu wisi suscipit
- Nulla suscipit interdum
- Pellentesque adipiscing purus
- Adipiscing purus ac magna
- Mauris a dolor nulla facilis
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ul> <li>Nullam non wisi a sem semper</li> <li>Semper eleifend. Donec mattis</li> <li>Duis pretium velit ac mauris <ul> <li>Proin eu wisi suscipit</li> <li>Nulla suscipit interdum</li> <li>Pellentesque adipiscing purus</li> <li>Adipiscing purus ac magna</li> </ul> </li> <li>Mauris a dolor nulla facilis</li></ul> |
Ordered List
- Nullam non wisi a sem semper
- Semper eleifend. Donec mattis
- Duis pretium velit ac mauris
- Proin eu wisi suscipit
- Nulla suscipit interdum
- Pellentesque adipiscing purus
- Adipiscing purus ac magna
- Mauris a dolor nulla facilis
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ol> <li>Nullam non wisi a sem semper</li> <li>Semper eleifend. Donec mattis</li> <li>Duis pretium velit ac mauris <ol> <li>Proin eu wisi suscipit</li> <li>Nulla suscipit interdum</li> <li>Pellentesque adipiscing purus</li> <li>Adipiscing purus ac magna</li> </ol> </li> <li>Mauris a dolor nulla facilis</li></ol> |
Unstyled List
- Nullam non wisi a sem semper
- Semper eleifend. Donec mattis
- Duis pretium velit ac mauris
- Proin eu wisi suscipit
- Nulla suscipit interdum
- Pellentesque adipiscing purus
- Adipiscing purus ac magna
- Mauris a dolor nulla facilis
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ul class="list-unstyled"> <li>Nullam non wisi a sem semper</li> <li>Semper eleifend. Donec mattis</li> <li>Duis pretium velit ac mauris <ul> <li>Proin eu wisi suscipit</li> <li>Nulla suscipit interdum</li> <li>Pellentesque adipiscing purus</li> <li>Adipiscing purus ac magna</li> </ul> </li> <li>Mauris a dolor nulla facilis</li></ul> |
Cont Text Backgrounds
bg-color-white
bg-color-dark
bg-color-light
bg-color-light2
1 2 3 4 5 6 | <div class="cont-text-bg"> <p class="bg-color-white margin-bottom-5 padding-all-10">bg-color-white</p> <p class="bg-color-dark color-white margin-bottom-5 padding-all-10">bg-color-dark</p> <p class="bg-color-light margin-bottom-5 padding-all-10">bg-color-light</p> <p class="bg-color-light2 padding-all-10">bg-color-light2</p></div> |
Cont Text Rounded Examples
rounded
rounded-2x
rounded-3x
rounded-4x
1 2 3 4 5 6 | <div class="cont-text-bg"> <p class="rounded bg-color-light margin-bottom-5 padding-all-10">rounded</p> <p class="rounded-2x bg-color-light margin-bottom-5 padding-all-10">rounded-2x</p> <p class="rounded-3x bg-color-light margin-bottom-5 padding-all-10">rounded-3x</p> <p class="rounded-4x bg-color-light margin-bottom-5 padding-all-10">rounded-4x</p></div> |
Heading Options
Heading Strip Style
Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante.
1 2 3 4 | <div class="heading heading-e1"> <h2>Heading Strip Style</h2> <p>Maecenas pede nisl, elementum eu, ornare ac, malesuada...</p></div> |
Heading Dashed Style
Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante.
1 2 3 4 | <div class="heading heading-e2"> <h2>Heading Dashed Style</h2> <p>Maecenas pede nisl, elementum eu, ornare ac, malesuada...</p></div> |