# パネル

### パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

    <div class="%{STYLEGUIDE_PAGE}-panel">
    	<div class="%{STYLEGUIDE_PAGE}-panel-header">
    		<h3 class="%{STYLEGUIDE_PAGE}-panel-title">パネルのタイトルです</h3>
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-body">
    		パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-footer">
    		パネルのフッター
    	</div>
    </div>

## 連なったパネル

### パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

### パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

### パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

    <div class="%{STYLEGUIDE_PAGE}-panel">
    	<div class="%{STYLEGUIDE_PAGE}-panel-header">
    		<h3 class="%{STYLEGUIDE_PAGE}-panel-title">パネルのタイトルです</h3>
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-body">
    		...
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-header">
    		<h3 class="%{STYLEGUIDE_PAGE}-panel-title">パネルのタイトルです</h3>
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-body">
    		...
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-header">
    		<h3 class="%{STYLEGUIDE_PAGE}-panel-title">パネルのタイトルです</h3>
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-body">
    		...
    	</div>
    </div>

## アイコンと一緒に

### パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

### パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

### パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

    <div class="%{STYLEGUIDE_PAGE}-panel">
    	<div class="%{STYLEGUIDE_PAGE}-panel-header">
    		<i class="%{STYLEGUIDE_PAGE}-icon-arrow-small-right %{STYLEGUIDE_PAGE}-float-right"></i><h3 class="%{STYLEGUIDE_PAGE}-panel-title">パネルのタイトルです</h3>
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-body">
    	...
    	</div>
    </div>

## カラーバリエーション

### パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

### パネルのタイトルです

パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。パネルの内容が入ります。

    <div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-panel-info">
    	<div class="%{STYLEGUIDE_PAGE}-panel-header">
    		...
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-body">
    		...
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-footer">
    		...
    	</div>
    </div>

    <div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-panel-danger">
    	<div class="%{STYLEGUIDE_PAGE}-panel-header">
    		...
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-body">
    		...
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-panel-footer">
    		...
    	</div>
    </div>