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