DRIVEN BASE

DENSO Corporate Identity Design System

DENSO Corporate Identity Design System

コンポーネント一覧

コンポーネントは汎用テンプレート内で使用することができます。

基本ブロック

メディア(画像/動画/複数画像)、見出し、本文、リンクがセットになったブロックです。

基本_1カラム

基本_2カラム

    • 画像キャプション

    タイトル(画像下パターン)

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  • 画像キャプション

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  • タイトル(画像上パターン)

    • 画像キャプション

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  • タイトル(画像上パターン)

    画像キャプション

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

基本_3カラム

    • 画像キャプション

    • 画像キャプション

    • 画像キャプション

    タイトル(ここにはリンクは入りません)

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    • 画像キャプション

    • 画像キャプション

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    タイトル(ここにはリンクは入りません)

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

基本_4カラム

    • 画像キャプション

    タイトル

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

    • 画像キャプション

    • 画像キャプション

    • 画像キャプション

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

    • 画像キャプション

    タイトル

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

    • 画像キャプション

    • 画像キャプション

    • 画像キャプション

    タイトル

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

基本_6カラム

カテゴリブロック

下層ページへの移動など、ページ遷移する際の導線として使用するブロックです、

カテゴリ_1カラム

カテゴリ_2カラム

カテゴリ_3カラム

Cate_col 4 / カテゴリ_4カラム

メディアブロック

メディア(画像/動画/複数画像)とテキスト(見出し、本文、リンク)を横並びにしたブロックです。

メディア_左

  • ここにキャプションが入ります

ここにはタイトルがはいります

このコンポーネント(.mod-cp-img-text-lt)はモバイルのときにメディアが上に表示されます。このコンポーネント(.mod-cp-img-text-lt)はモバイルのときにメディアがテキストの上に表示されます。このコンポーネント(.mod-cp-img-text-lt)はモバイルのときにメディアがテキストの上に表示されます。

画像キャプション

ここにはタイトルがはいります

このコンポーネント(.mod-cp-img-text-lb)はモバイルのときにメディアがテキストの下に表示されます。このコンポーネント(.mod-cp-img-text-lb)はモバイルのときにメディアがテキストの下に表示されます。

メディア_右

  • ここにキャプションが入ります

ここにはタイトルがはいります

このコンポーネント(.mod-cp-img-text-rt)はモバイルのときにメディアが上に表示されます。このコンポーネント(.mod-cp-img-text-rt)はモバイルのときにメディアがテキストの上に表示されます。このコンポーネント(.mod-cp-img-text-rt)はモバイルのときにメディアがテキストの上に表示されます。

  • ここに1枚目のキャプションが入ります

  • ここに2枚目のキャプションが入ります

  • ここにキャプションが入ります

ここにはタイトルがはいります

このコンポーネント(.mod-cp-img-text-rb)はモバイルのときにメディアが上に表示されます。このコンポーネント(.mod-cp-img-text-rb)はモバイルのときにメディアがテキストの上に表示されます。このコンポーネント(.mod-cp-img-text-rb)はモバイルのときにメディアがテキストの上に表示されます。

見出しブロック

H2見出し(ノーマル)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

H2見出し(ラージ)

H3見出し

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

H4見出し

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

本文ブロック

本文_汎用

これは本文テキストです。このテキストはダミーです。文中リンクはこうなります別窓リンクPDFリンク
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

本文_大

これは本文テキスト(ラージ)です。使用する際は本文のコンポーネントに.largeのクラスをつけます。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

本文_キャプション

これはキャプション用テキストです。このテキストはダミーです。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

本文_太字

これは本文テキスト(ボールド)です。使用する際は本文のコンポーネントに.boldのクラスをつけます。
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

リンク_汎用

リンク_ボタン

リンク_ボタン_3カラム

※3つより少ないのときは中央寄せになります

リンク_ページ内

※数はliの数によって可変

リンク_スライダー

リンク_サムネイル

リストブロック

リスト_順序なし

  • このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。

  • このテキストはダミーです。このテキストはダミーです。

  • このテキストはダミーです。このテキストはダミーです。

  • このテキストはダミーです。このテキストはダミーです。

  • このテキストはダミーです。このテキストはダミーです。

リスト_順序なし_2カラム

リスト_順序なし_3カラム

リスト_順序あり

  1. このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。

  2. このテキストはダミーです。このテキストはダミーです。

  3. このテキストはダミーです。このテキストはダミーです。

  4. このテキストはダミーです。このテキストはダミーです。

  5. このテキストはダミーです。このテキストはダミーです。

リスト_順序あり_2カラム

  1. リンクがはいる場合はこうなります

  2. 別窓リンク

  3. PDFリンク

  4. このテキストはダミーです。

  5. このテキストはダミーです。

リスト_順序あり_3カラム

  1. リンクがはいる場合はこうなります

  2. 別窓リンク

  3. PDFリンク

  4. このテキストはダミーです。

  5. このテキストはダミーです。

リスト_QA

  • 18px Regular Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  • 18px Regular Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  • 18px Regular Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    Link_Normal

メディア_画像小

  • ここにはタイトルがはいります

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy t

  • ここにはタイトルがはいります

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy t

  • ここにはタイトルがはいります

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy t

  • ここにはタイトルがはいります

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy t

装飾ブロック

ボックス_汎用_1カラム

  • ここにキャプションが入ります

ここにはタイトルがはいります

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

ボックス_本文

このテキストはダミーです

このテキストはダミーです

このテキストはダミーです

このテキストはダミーです

ボックス_本文_背景

このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。このテキストはダミーです。

このテキストはダミーです。このテキストはダミーです。

表組みブロック

Single

キャプションがあるばあいはここに記入してください
見出し SIze 16px Regular
見出し SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,
見出し

SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,

  • SIze 16px Regular,

  • SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze

Link

Link_PDF

※キャプションが入る場合

single
見出し SIze 16px Regular SIze 16px Regular
見出し SIze 16px Regular SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,
見出し SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,

Multi

※theadがある場合はmultiをつかってください

見出し1 見出し2 見出し2
見出し1 SIze 16px Regular SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,
見出し1 SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular, SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,SIze 16px Regular,
横に項目が多い場合
見出し1 見出し2 見出し3 見出し4 見出し5
内容内容 内容内容 内容内容 内容内容 内容内容
内容内容 内容内容 内容内容 内容内容 内容内容
横にも縦にも項目が多い場合
見出し1 見出し2 見出し3 見出し4 見出し5
みだし 内容内容 内容内容 内容内容 内容内容
みだし 内容内容 内容内容 内容内容 内容内容

その他

チェックボックス

トグル

Title Text Lorem ipsum dummy text 24px

Free Area

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Title Text Lorem ipsum dummy text 24px

Free Area

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

問い合わせ