project-widget

widget

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

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

(widget-contents)
<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 -->

widget-(size)

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

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

(widget-contents)

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

(widget-contents)
<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 -->