# サムネイル

## レスポンシブ対応

    <img src="/themes/system/admin/styleguide/images/sampleImage.jpg" alt="" class="%{STYLEGUIDE_PAGE}-img-responsive">

## 角丸

    <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>