Link 1

画像+テキスト a.card-apple

画像+テキスト。画像の下にテキストがあるレイアウト。マウスカーソルがリンクの上に来るとa要素全体の色が変わります。

a.card-apple

サンプルサンプル
ハニードーナッツ あまさ控えめ
サンプルサンプル

a.card-apple.type-title

画像の上にタイトルが入るタイプで、タイトルはメインとサブがあります。

クラスでバリエーション
アイコンの位置

a.card-apple
標準はアイコンは尾

a.card-apple.type-head
アイコン頭

a.card-apple.type-ico-none
アイコンなし

見出しの高さ

a.card-apple.type-line-1
min-heightで指定

見出しの高さ

a.card-apple.type-line-2

見出しの高さ

a.card-apple.type-line-3

アイコンの種類

a.card-apple.icon-blank

a.card-apple.icon-another

ボーダー枠の種類

a.card-apple.type-border
画像だけボーダー角丸

a.card-apple.type-border-a
画像と見出しにボーダー角丸

a.card-apple.type-border-b
画像と見出しにボーダー角

a.card-apple.type-border-c
画像と見出しにボーダー角

いろいろ組み合わせ

a.card-apple.type-another.type-border

関連

a.card-apple .c-pic

a.link-ut-pic

a.card-apple だと .c-pic で囲う必要があるが、これは違う。html構造がシンプルになる。

a.card-banana

width: 60%

.card-banana

サンプルサンプルサンプルサンプル

a.card-banana

a.card-banana.type-a

a.card-banana

サンプルサンプルサンプルサンプル

a.card-banana.no-pic

a.card-banana.adjust-pic10 (10%)

a.card-banana.adjust-pic50 (50%)

a.card-banana

いやま狩の居りましときのようににやにやけした子のようた外国へぶんへんを行っでた。ところが手は夜通し見て遠く見ているませ。セロも思わずやめましだ。ゴーシュへむずかしいれてまるで夜中に食うませうちもきかたた。

a.card-carrot

下に帯

width: 30%

a.card-carrot

.card-carrot

サンプルサンプルサンプルサンプル

a.card-daikon

帯が全体、文字中央

width: 30%

a.card-daikon

a.card-daikon.type-text

a.card-daikon.type-overlay

a.card-ut-notice

width: 30%

a.card-ut-notice

a.card-ut-notice

お知らせ
またあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときのまたあけちのひるましときの...