component-panel

c-panel

4点の画像とテキストのセットをパネル状に表示する。.m-thumbnail を包括する。
画像は1・2・3枚目は3:2、4枚目は3:2もしくは1:1の縦横比を保持してトリミングされ、HTMLの記述順で1枚目 > 2・3枚目 > 4枚目の順に面積が小さくなっていく。

.c-panel-contents.u-bg-gray 等で背景色を変えることができる。
.c-panel-title.m-title.u-font-third が付与されているが、フォントサイズはこのコンポーネント独自の変化をする。

画像4点パネル

これはリード文です。短い文章を表示できます。

<div class="c-panel">
    <div class="c-panel-contents u-bg-gray u-bg-fade">
        <div class="c-panel-contents-inner">
            <h2 class="c-panel-title m-title u-font-third">画像4点パネル</h2>
            <p class="c-panel-body">これはリード文です。短い文章を表示できます。</p>
        </div><!-- /.c-panel-contents-inner -->
    </div><!-- /.c-panel-contents -->
    <figure class="c-panel-object m-thumbnail">
        <img src="../images/_dummy/image_01_s.jpg" alt="">
    </figure><!-- /.c-panel-object -->
    <figure class="c-panel-object m-thumbnail">
        <img src="../images/_dummy/image_08_s.jpg" alt="">
    </figure><!-- /.c-panel-object -->
    <figure class="c-panel-object m-thumbnail">
        <img src="../images/_dummy/image_05_s.jpg" alt="">
    </figure><!-- /.c-panel-object -->
    <figure class="c-panel-object m-thumbnail">
        <img src="../images/_dummy/image_06_s.jpg" alt="">
    </figure><!-- /.c-panel-object -->
</div><!-- /.c-panel -->

c-panel-reverse

画像とテキストの配置を鏡面で逆にする。

画像4点パネル

これはリード文です。短い文章を表示できます。

<div class="c-panel c-panel-reverse">
    <div class="c-panel-contents u-bg-gray u-bg-fade">
        <div class="c-panel-contents-inner">
            <h2 class="c-panel-title m-title u-font-third">画像4点パネル</h2>
            <p class="c-panel-body">これはリード文です。短い文章を表示できます。</p>
        </div><!-- /.c-panel-contents-inner -->
    </div><!-- /.c-panel-contents -->
    <figure class="c-panel-object m-thumbnail">
        <img src="../images/_dummy/image_01_s.jpg" alt="">
    </figure><!-- /.c-panel-object -->
    <figure class="c-panel-object m-thumbnail">
        <img src="../images/_dummy/image_08_s.jpg" alt="">
    </figure><!-- /.c-panel-object -->
    <figure class="c-panel-object m-thumbnail">
        <img src="../images/_dummy/image_05_s.jpg" alt="">
    </figure><!-- /.c-panel-object -->
    <figure class="c-panel-object m-thumbnail">
        <img src="../images/_dummy/image_06_s.jpg" alt="">
    </figure><!-- /.c-panel-object -->
</div><!-- /.c-panel -->