SPSTRAP Document API

Headline - NUDE

Headline - Basic

Headline - Basic - center

Headline - Basic - right

Underline - subtext

<div class="sp--title" theme="underline" scale="2xl-nude">
                                <div class="sp--title-inner">
                                    <dt><strong>Basic title</strong></dt>
                                    <span class="sp--title-subtext">Lorem ipsum dolor sit amet</span>
                                    <p class="sp--title-right">
                                        <a href="#!" class="sp--btn" scale="md-nude">더보기</a>
                                    </p>
                                </div>
                            </div>
                            
                            <br />
                            <div class="sp--title" theme="underline-bold" scale="2xl-nude">
                                <div class="sp--title-inner">
                                    <dt><strong>Basic title</strong></dt>
                                    <span class="sp--title-subtext">Lorem ipsum dolor sit amet</span>
                                    <p class="sp--title-right">
                                        <a href="#!" class="sp--btn" scale="md-nude">더보기</a>
                                    </p>
                                </div>
                            </div>

<br />
                            <div class="sp--title" theme="underline-heavy" scale="2xl-nude">
                                <div class="sp--title-inner">
                                    <dt><strong>Basic title</strong></dt>
                                    <span class="sp--title-subtext">Lorem ipsum dolor sit amet</span>
                                    <p class="sp--title-right">
                                        <a href="#!" class="sp--btn" scale="md-nude">더보기</a>
                                    </p>
                                </div>
                            </div>

Leftband - subtext

<div class="sp--title" theme="leftband" scale="2xl-nude">
                                <div class="sp--title-inner">
                                    <dt><strong>Left band</strong></dt>
                                    <span class="sp--title-subtext">Lorem ipsum dolor sit amet</span>
                                    <p class="sp--title-right">
                                        <a href="#!" class="sp--btn" scale="md-nude">더보기</a>
                                    </p>
                                </div>
                            </div>

<br />
                            <div class="sp--title" theme="leftband-bold" scale="2xl-nude">
                                <div class="sp--title-inner">
                                    <dt><strong>Left band</strong></dt>
                                    <span class="sp--title-subtext">Lorem ipsum dolor sit amet</span>
                                    <p class="sp--title-right">
                                        <a href="#!" class="sp--btn" scale="md-nude">더보기</a>
                                    </p>
                                </div>
                            </div>

<br />
                            <div class="sp--title" theme="leftband-heavy" scale="2xl-nude">
                                <div class="sp--title-inner">
                                    <dt><strong>Left band</strong></dt>
                                    <span class="sp--title-subtext">Lorem ipsum dolor sit amet</span>
                                    <p class="sp--title-right">
                                        <a href="#!" class="sp--btn" scale="md-nude">더보기</a>
                                    </p>
                                </div>
                            </div>

Headline - leftwall

<div class="sp--box" fill="justify" vertical="bottom">
                                <ul>
                                    <li>
                                        <div class="sp--title" [theme="leftwall"] scale="2xl">
                                            <div class="sp--title-inner">
                                                THE FUTURE<br />
                                                BELONGS TO<br />
                                                THOSE
                                                <hr class="sp--hr" space="xs" />
                                                <p class="sp--title-subtext">Lorem ipsum dolor sit amet</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#!" class="sp--btn" scale="lg-nude">더보기</a>
                                    </li>
                                </ul>
                            </div>

Headline - rightwall

Headline - inline classic

Headline - With Thumbnail

Customize - 1

Customize - 2

Customize - 3

Customize - 4

Customize - 5

Headline - cocoon (light)

<div class="sp--title" theme="[cocoon]-[light]-[round]-[center]-[inline]" line="light" scale="xl">
                                <div class="sp--title-inner">Cocoon light</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-light-center-inline" line="light" scale="xl">
                                <div class="sp--title-inner">Cocoon round light</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-light-reverse-center-inline" line="light" scale="xl">
                                <div class="sp--title-inner">Cocoon light - reverse</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-light-reverse-round-center-inline" line="light" scale="xl">
                                <div class="sp--title-inner">Cocoon light round - reverse</div>
                            </div>

Headline - cocoon (gray)

<div class="sp--title" theme="cocoon-[gray]-round-center-inline" line="gray" scale="xl">
                                <div class="sp--title-inner">Cocoon gray</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-gray-center-inline" line="gray" scale="xl">
                                <div class="sp--title-inner">Cocoon round gray</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-gray-reverse-center-inline" line="gray" scale="xl">
                                <div class="sp--title-inner">Cocoon gray - reverse</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-gray-reverse-round-center-inline" line="gray" scale="xl">
                                <div class="sp--title-inner">Cocoon gray round - reverse</div>
                            </div>

Headline - cocoon (dark)

<div class="sp--title" theme="cocoon-[dark]-round-center-inline" line="dark" scale="xl">
                                <div class="sp--title-inner">Cocoon dark</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-dark-center-inline" line="dark" scale="xl">
                                <div class="sp--title-inner">Cocoon round dark</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-dark-reverse-center-inline" line="dark" scale="xl">
                                <div class="sp--title-inner">Cocoon dark - reverse</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-dark-reverse-round-center-inline" line="dark" scale="xl">
                                <div class="sp--title-inner">Cocoon dark round - reverse</div>
                            </div>

Headline - cocoon (primary)

<div class="sp--title" theme="cocoon-[primary]-round-center-inline" line="primary" scale="xl">
                                <div class="sp--title-inner">Cocoon primary</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-primary-center-inline" line="primary" scale="xl">
                                <div class="sp--title-inner">Cocoon round primary</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-primary-reverse-center-inline" line="primary" scale="xl">
                                <div class="sp--title-inner">Cocoon primary - reverse</div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-primary-reverse-round-center-inline" line="primary" scale="xl">
                                <div class="sp--title-inner">Cocoon primary round - reverse</div>
                            </div>

Headline - band

<div class="sp--title" theme="cocoon-[band]-[light]-center-inline" line="light" scale="2xl">
                                <div class="sp--title-inner"><span>band light</span></div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-[band]-[dark-reverse]-center-inline" line="dark" scale="2xl">
                                <div class="sp--title-inner"><span>band dark-reverse</span></div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-[band]-[primary]-center-inline" line="primary" scale="2xl">
                                <div class="sp--title-inner"><span>band primary</span></div>
                            </div>

<br />
                            <div class="sp--title" theme="cocoon-[band]-[primary-reverse]-center-inline" line="primary" scale="2xl">
                                <div class="sp--title-inner"><span>band primary-reverse</span></div>
                            </div>

Headline - brackets (light)

Class

name	description
sp--title	타이틀 컨테이너
sp--title-inner	타이틀 내부 텍스트 영역
sp--title-subtext	서브 텍스트 영역 font-size: .6em; color: var(--gray-color); 기본적으로 상속의 구조를 가지며, 메인 폰트의 .6em 사이즈의 회색으로 작성된다. 서브 텍스트의 사이즈 역시 지정할 수 있지만, 가급적 상속하자. 서브 텍스트의 attribute 정의 <!--// /* * 서브 텍스트의 정의 */ .sp--title-subtext { / * 기본적인 서브 텍스트 */ font-size: .6em; color: var(--gray-color); } .sp--title-subtext[theme^="xs"] { font-size: var(--font-size-xs); } .sp--title-subtext[theme^="sm"] { font-size: var(--font-size-sm); } .sp--title-subtext[theme^="md"] { font-size: var(--font-size-md); } .sp--title-subtext[theme^="lg"] { font-size: var(--font-size-lg); } .sp--title-subtext[theme^="xl"] { font-size: var(--font-size-xl); } .sp--title-subtext[theme^="2xl"] { font-size: var(--font-size-2xl); } .sp--title-subtext[theme^="3xl"] { font-size: var(--font-size-3xl); } .sp--title-subtext[theme="gray"] { color: var(--gray-color); } .sp--title-subtext[theme*="dark"] { color: var(--dark-color); } //-->

Attribute

name	description
theme	cocoon-band-brackets-primary-reverse-center-inline
scale	xs, sm, md, lg, xl, 2xl, 3xl cocoon 스타일만 대응 css - animation document
line	light, gray, dark, primary cocoon 스타일만 대응 css - animation document