クラスbox-ivoryは、背景に色面を敷きます。さらにp-deepを指定すると、PCとスマホで余白を変えることができます。
PC ⇒ 2em。スマホ ⇒ 2em 1em。
  • ノーマルの黒丸リストです。ulタグにクラスtype-discを当てます
  • このサンプルではulタグの親要素にdivタグ(クラスbox-ibory)を当てています
  • リストテスト
  • アイコン付きのリストです。アイコンリストはulタグにクラスtype-iconsを当てます
  • ulタグのクラス名(icon__○○)変更でアイコンを変えられます
  • チェックボックス(icon__checkbox)/マル(icon__circle)/×(icon__cross)
  • このサンプルではulタグの親要素にdivタグ(クラスbox-ibory)を当てています
  • アイコン付きのリストです。アイコンリストはulタグにクラスtype-iconsを当てます
  • ulタグのクラス名(icon__○○)変更でアイコンを変えられます
  • チェックボックス(icon__checkbox)/マル(icon__circle)/×(icon__cross)
  • このサンプルではulタグの親要素にdivタグ(クラスbox-ibory)を当てています
  • アイコン付きのリストです。アイコンリストはulタグにクラスtype-iconsを当てます
  • ulタグのクラス名(icon__○○)変更でアイコンを変えられます
  • チェックボックス(icon__checkbox)/マル(icon__circle)/×(icon__cross)
  • このサンプルではulタグの親要素にdivタグ(クラスbox-ibory)を当てています

11つ目タイトル

内容がここに入ります。タイトルはh3になっています。

22つ目タイトル

内容がここに入ります。タイトルはh3になっています。

33つ目タイトル

内容がここに入ります。タイトルはh3になっています。

44つ目タイトル

内容がここに入ります。タイトルはh3になっています。

STEP
タイトル
  • ここにステップの内容を記載します。本サンプルではリストを採用しています。
  • ステップは追加できます。番号は自動的に振られます
STEP
タイトル
  • ここにステップの内容を記載します。本サンプルではリストを採用しています。
  • ステップは追加できます。番号は自動的に振られます
キャプションタイトル

ここにキャプションコンテンツの内容が入ります。デフォルトでは余白ナシのpタグです

キャプションタイトル

ここにキャプションコンテンツの内容が入ります。クラスcap_redを取るとグレーになります