project-widget

新着情報など、サイト内で配置が不定となる可能性があるコンテンツ群を表示する。
.p-widget-contents, .p-widget-footer には、必ず他のオブジェクトが含まれる。
このクラス単独では、見出し、余白、 position: relative の指定のみを行う。

widget を section, block 等に変更することができる。 /_scss/_config_advance.scss の変数
$widget を変更すること。

<div class="p-widget">
    <div class="p-widget-header">
        <h2 class="p-widget-title">ウィジェットの見出しです</h2>
    </div><!-- /.p-widget-header -->

    <div class="p-widget-contents">
        <div style="padding: 1rem; text-align:center; background-color: #e4fcd0;">(widget-contents)</div>
    </div><!-- /.p-widget-contents -->

    <div class="p-widget-footer">
        <div style="padding: 1rem; text-align:center; background-color: #ffe6f3;">(widget-footer)</div>
    </div><!-- /.p-widget-footer -->

</div><!-- /.p-widget -->

ウィジェットのサイズを変える。(size)は、 sm, lg に対応している。

<div class="p-widget p-widget-sm">
    <div class="p-widget-header">
        <h2 class="p-widget-title">ウィジェットの見出しです</h2>
    </div><!-- /.p-widget-header -->

    <div class="p-widget-contents">
        <div style="padding: 1rem; text-align:center; background-color: #e4fcd0;">(widget-contents)</div>
    </div><!-- /.p-widget-contents -->

    <div class="p-widget-footer">
        <div style="padding: 1rem; text-align:center; background-color: #ffe6f3;">(widget-footer)</div>
    </div><!-- /.p-widget-footer -->

</div><!-- /.p-widget -->

<div class="p-widget p-widget-lg">
    <div class="p-widget-header">
        <h2 class="p-widget-title">ウィジェットの見出しです</h2>
    </div><!-- /.p-widget-header -->

    <div class="p-widget-contents">
        <div style="padding: 1rem; text-align:center; background-color: #e4fcd0;">(widget-contents)</div>
    </div><!-- /.p-widget-contents -->

    <div class="p-widget-footer">
        <div style="padding: 1rem; text-align:center; background-color: #ffe6f3;">(widget-footer)</div>
    </div><!-- /.p-widget-footer -->

</div><!-- /.p-widget -->

widget

ウィジェットの見出しです

widget-(size)

ウィジェットの見出しです

ウィジェットの見出しです

Style guide