カード未リファクタリング

スタンダードなカードモジュール

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

クラス名

bl_card

マークアップ例

<article><a href="" class="bl_card">
	<figure class="bl_card_imgWrapper"><img src="" alt="" /></figure>
	<div class="bl_card_body">
		<h3 class="bl_card_ttl"></h3>
		<!-- 本文、ボタンなど -->
	</div>
</a><!-- /.bl_card --></article>

定義

機能
写真、タイトル、短い本文、ボタンなどを含む。記事リンクやレシピなど写真付きの紹介に向く。

あしらい・振る舞い
写真は最初に入れる想定。

特記事項
リンクが必要な場合は、a.bl_card とする。

カードで使うNewバッジ一旦開発完了

New

バッジ付きのカードモジュール

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキスト

クラス名

bl_card_badge

マークアップ例

<b class="bl_card_badge"><span class="bl_card_badge_txt">New</span></b>

定義

注目させたい場合などに使える。文字数などによっては調整が必要。

カードで使うブクマじるし一旦開発完了

ブックマーしてない

ブクマ印付きのカードモジュール

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキスト

ブックマークしている

ブクマ印付きのカードモジュール

ブクマ済みになると色がつくとか、とか。

テキストテキストテキストテキストテキストテキストテキスト

クラス名

bl_card_bookMark

マークアップ例

<b class="bl_card_bookMark"><span class="el_readerOnly">ブックマーしてない</span></b>
<b class="bl_card_bookMark is_active"><span class="el_readerOnly">ブックマークしている</span></b>

定義

ブックマークに限らずステータスの表示としても。

ファイルパス

Change Log

1. 開発開始：2021-07-11
2. ブラウザチェックが不足
3. 最終更新：2021-10-24