バッジ

<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>

ボタン

<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>

<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>

<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>

カード

ほげほげ

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

ベタ塗り

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

border headline

ボーダー

<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

まる

<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

まる

<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

まる

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