Styleguide

Category

Tag

All Colors

バッジ

/assets/src/styles/object/component/_badge.scss

テキストが入りますNEW

テキストが入りますNEW

テキストが入りますNEW

テキストが入りますNEW

テキストが入りますNEW
NEW NEW

<h1>テキストが入ります<span class="c-badge">NEW</span></h1>
<h2>テキストが入ります<span class="c-badge">NEW</span></h2>
<h3>テキストが入ります<span class="c-badge">NEW</span></h3>
<h4>テキストが入ります<span class="c-badge">NEW</span></h4>
<h5>テキストが入ります<span class="c-badge">NEW</span></h5>

<span class="c-badge">NEW</span>
<span class="c-badge c-badge_secondary">NEW</span>

ボタン

/assets/src/styles/object/component/_btn.scss

<a href="#" class="c-btn">詳しくはこちら</a>
<a href="#" class="c-btn c-btn_primary">詳しくはこちら</a>
<a href="#" class="c-btn c-btn_secondary">詳しくはこちら</a>
<a href="#" class="c-btn c-btn_success">詳しくはこちら</a>
<a href="#" class="c-btn c-btn_warning">詳しくはこちら</a>
<a href="#" class="c-btn c-btn_alert">詳しくはこちら</a>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed velit quae, beatae, est odio dolorem porro suscipit ipsam aliquid quisquam a nobis consequuntur, alias repellat atque officia itaque quaerat omnis?

詳しくはこちら


<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed velit quae, beatae, est odio dolorem porro suscipit ipsam aliquid quisquam a nobis consequuntur, alias repellat atque officia itaque quaerat omnis?</p>

<p><a href="#" class="c-btn">詳しくはこちら</a></p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed velit quae, beatae, est odio dolorem porro suscipit ipsam aliquid quisquam a nobis consequuntur, alias repellat atque officia itaque quaerat omnis?

詳しくはこちら


<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed velit quae, beatae, est odio dolorem porro suscipit ipsam aliquid quisquam a nobis consequuntur, alias repellat atque officia itaque quaerat omnis?</p>

<p class="u-text-right"><a href="#" class="c-btn">詳しくはこちら</a></p>

カード

/assets/src/styles/object/component/_card.scss

ほげほげ

Lorem, ipsum dolor sit amet consectetur adipistur sa sapiente suscipitaliquam placeat perspiciatis.

ほげほげ

Lorem, ipsum dolor sit amet consectetur adipistur sa sapiente suscipitaliquam placeat perspiciatis.

詳しくはこちら

ほげほげ

Lorem, ipsum dolor sit amet consectetur adipistur sa sapiente suscipitaliquam placeat perspiciatis.

詳しくはこちら


<div class="c-grid">
    <div class="c-grid__u c-grid__u_medium_1of3">
        <div class="c-card">
            <div class="c-card__object"><img src="https://placehold.jp/320x180.png" alt=""></div>
            <div class="c-card__body">
                <h3 class="c-card__title">ほげほげ</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipistur sa sapiente suscipitaliquam placeat perspiciatis.</p>
            </div>
        </div>
    </div>
    <div class="c-grid__u c-grid__u_medium_1of3">
        <div class="c-card">
            <div class="c-card__object"><img src="https://placehold.jp/320x180.png" alt=""></div>
            <div class="c-card__body">
                <h3 class="c-card__title">ほげほげ</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipistur sa sapiente suscipitaliquam placeat perspiciatis.</p>
                <p><a class="c-btn">詳しくはこちら</a></p>
            </div>
        </div>
    </div>
    <div class="c-grid__u c-grid__u_medium_1of3">
        <div class="c-card">
            <div class="c-card__body">
                <h3 class="c-card__title">ほげほげ</h3>
                <p>Lorem, ipsum dolor sit amet consectetur adipistur sa sapiente suscipitaliquam placeat perspiciatis.</p>
                <p><a class="c-btn">詳しくはこちら</a></p>
            </div>
        </div>
    </div>
</div>

bg headline

/assets/src/styles/object/component/headline/_h-bg.scss

ベタ塗り

見出しです。

<h2 class="c-h-bg">見出しです。</h2>

border headline

/assets/src/styles/object/component/headline/_h-border.scss

ボーダー

ボーダーの見出しです。

テキストセンター

左せん

ダブル

だっしゅ

上下

みっくす

<h2 class="c-h-border">ボーダーの見出しです。</h2>
<h2 class="c-h-border c-h-border_center">テキストセンター</h2>
<h2 class="c-h-border c-h-border_left">左せん</h2>
<h2 class="c-h-border c-h-border_double">ダブル</h2>
<h2 class="c-h-border c-h-border_dashed">だっしゅ</h2>
<h2 class="c-h-border c-h-border_top-bottom">上下</h2>
<h2 class="c-h-border c-h-border_mix">みっくす</h2>

ボーダーの見出しです。

ボーダーの見出しです。

<h2 class="c-h-border c-h-border_left c-h-border_color_primary">ボーダーの見出しです。</h2>
<h2 class="c-h-border c-h-border_left c-h-border_color_secondary">ボーダーの見出しです。</h2>

mark headline

/assets/src/styles/object/component/headline/_h-mark.scss

まる

マークがつきます

マークがつきます

<h2 class="c-h-mark c-h-mark_circle">マークがつきます</h2>
<h2 class="c-h-mark c-h-mark_circle  c-h-mark_circle_border">マークがつきます</h2>

四角

マークがつきます

マークがつきます

<h2 class="c-h-mark c-h-mark_square">マークがつきます</h2>
<h2 class="c-h-mark c-h-mark_square  c-h-mark_circle_border">マークがつきます</h2>

stripe headline

/assets/src/styles/object/component/headline/_h-stripe.scss

まる

ストライプです

ストライプです

ストライプです

ストライプです

ストライプです

ストライプです

<h2 class="c-h-stripe">ストライプです</h2>
<h2 class="c-h-stripe c-h-stripe_reverse">ストライプです</h2>
<h2 class="c-h-stripe c-h-stripe_b-left">ストライプです</h2>
<h2 class="c-h-stripe c-h-stripe_b-top-bottom">ストライプです</h2>
<h2 class="c-h-stripe c-h-stripe_bottom">ストライプです</h2>
<h2 class="c-h-stripe c-h-stripe_mix">ストライプです</h2>

subtitle headline

/assets/src/styles/object/component/headline/_h-subtitle.scss

まる

ストライプですspanタグを入れます

<h2 class="c-h-subtitle">ストライプです<span class="null">spanタグを入れます</span></h2>