component-media

media

サムネイル等のメディアオブジェクトと、テキストオブジェクトが並列しているコンポーネントを表示する。
必ずmedia-(type)クラスを付与する。リンクがない場合でも .media-innerが必須であることに注意。

(other media object)
(other object) 
<div style="width: 768px;">

<div class="media">
    <div class="media-inner">
        <div class="media-img">
            <div class="bg bg-first bg-fade p-xl">
                (other media object)
            </div>
        </div>

        <div class="media-contents">
            <div class="bg bg-second bg-fade p">
                (other object)
            </div>
        </div><!-- /.media-contents -->
    </div>
</div>

</div>

media-vm

画像と本文を、上揃えではなく縦中央に整列させる。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

<div style="width: 768px;">

<div class="media media-vm">
    <div class="media-inner">
        <div class="media-img">
            <div class="thumbnail thumbnail-square">
                <img src="http://placehold.jp/24/cccccc/ffffff/300x300.png?text=dummy_image" alt="">
            </div>
        </div>

        <div class="media-contents">
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
        </div><!-- /.media-contents -->
    </div>
</div>

</div>

media-r

画像と本文の配置を逆にする。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

<div style="width: 768px;">

<div class="media media-r">
    <div class="media-inner">
        <div class="media-img">
            <div class="thumbnail thumbnail-square">
                <img src="http://placehold.jp/24/cccccc/ffffff/300x300.png?text=dummy_image" alt="">
            </div>
        </div>

        <div class="media-contents">
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
        </div><!-- /.media-contents -->
    </div>
</div>

</div>

media-01

新着情報のエントリー繰り返し部分などに使用する。

<div style="width: 768px;">

<div class="media media-01">
    <a href="#" class="media-inner">
        <div class="media-img">
            <div class="thumbnail thumbnail-4to3">
                <img src="http://placehold.jp/24/cccccc/ffffff/480x320.png?text=dummy_image" alt="">
            </div>
        </div>

        <div class="media-contents">
            <h3 class="media-title title title-05">サマリーのタイトルですサマリーのタイトルですサマリーのタイトルです</h3>
            <time class="media-date">2017-12-28</time>
            <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
        </div><!-- /.media-contents -->
    </a>
</div>

</div>