サムネイル

角丸

<img src="" alt="" class="%{STYLEGUIDE_PAGE}-img-rounded">

シャドウ

<img src="" alt="" class="%{STYLEGUIDE_PAGE}-img-shadow">

<img src="" alt="" class="%{STYLEGUIDE_PAGE}-img-bordered">

キャプション

キャプション
<div class="%{STYLEGUIDE_PAGE}-img-captionBox">
<img src="" alt="">
<div class="%{STYLEGUIDE_PAGE}-img-caption">キャプション</div>
</div>

%{STYLEGUIDE_PAGE}-img-roundedと合わせると

キャプション
<div class="%{STYLEGUIDE_PAGE}-img-captionBox %{STYLEGUIDE_PAGE}-img-rounded">
<img src="" alt="">
<div class="%{STYLEGUIDE_PAGE}-img-caption">キャプション</div>
</div>

%{STYLEGUIDE_PAGE}-img-borderedと合わせると

キャプション
<div class="%{STYLEGUIDE_PAGE}-img-captionBox">
<img src="" alt="" class="%{STYLEGUIDE_PAGE}-img-bordered">
<div class="%{STYLEGUIDE_PAGE}-img-caption">キャプション</div>
</div>

hoverしたらキャプションが見える

 キャプション

<a class="%{STYLEGUIDE_PAGE}-img-captionBox">
<img src="" alt="">
<p class="%{STYLEGUIDE_PAGE}-img-caption %{STYLEGUIDE_PAGE}-img-hover">キャプション</p>
</a>

全部合わせると

 キャプション

<a class="%{STYLEGUIDE_PAGE}-img-captionBox %{STYLEGUIDE_PAGE}-img-rounded">
<img src="" alt="" class="%{STYLEGUIDE_PAGE}-img-bordered %{STYLEGUIDE_PAGE}-img-shadow">
<p class="%{STYLEGUIDE_PAGE}-img-caption %{STYLEGUIDE_PAGE}-img-hover">キャプション</p>
</a>

文章付き

サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。

<a class="%{STYLEGUIDE_PAGE}-thumbnail">
<img src="" alt="">
<p>サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。サムネイルのサンプルテキスト。</p>
</a>