Dads Size Comparison

Button (solid-fill)

xs sm md lg

Input Text

sm md lg

Input Number

sm md lg

Select

sm md lg

Checkbox

sm md lg

Radio

sm md lg

Accordion

ダミーテキストとは何ですか？
これはダミーテキストです。
ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。
「ダミーテキストとは何ですか？」の先頭に戻る

二つ目の質問が入ります
回答テキストが入ります。

Blockquote

これは引用文の例です。デジタル庁デザインシステムでは、アクセシビリティファーストの原則に基づいて、すべてのユーザーが利用しやすいサービスの提供を目指しています。

Breadcrumb

Card / example-1: 縦型・画像オーバーラップ

Card / example-2: 横型・画像右・subgrid

Card / example-3: 縦型・アバター付き・subgrid高さ揃え

Card / example-4: 平型・テキスト主体・アクションボタン付き

Card / example-5: 縦型・日付バッジ・ボタン色テーマ変数上書き

Card / example-6: 選択カード・:has(:checked)で状態背景変化

Button

Calendar

日 月 火 水 木 金 土

Carousel

スライド1
スライド1の画像

すべてのスライド

Checkbox

Chip Label

ラベル

Date Picker

Description List

氏名
山田 太郎
メールアドレス
taro.yamada@example.com
電話番号
03-0000-0000

Disclosure

詳細を表示する

開閉コンテンツが入ります。accordionと異なりh要素を持たない単体用途に適しています。

先頭に戻る

Divider

Drawer

メニュー

ドロワーのコンテンツが入ります。

Emergency Banner

【緊急】〇〇地区に避難準備情報が発令されました

1時23分に○○地区に対して避難準備情報が発令されました。お年寄りの方等避難に時間がかかる方は、直ちに指定避難所へ避難してください。

指定避難所を確認する

File Upload

対応ファイル：PNG/JPEG/GIF形式の画像、Excel/Word/PowerPoint/PDF形式のドキュメント
5ファイルまで選択可能。1ファイルあたり5MB（5,242,880バイト）まで、合計10MB（10,485,760バイト）まで

または、このエリア内にドラッグ＆ドロップ

    ファイルが選択されていません

    Form Control Label

    姓と名の間にスペースを入れてください。

    該当する項目 任意

    該当するものをすべて選択してください。

    ＊エラーテキストが入ります。

    Global Menu

    Hamburger Menu Button

    Heading

    Size scale

    h2.dads-h dads-size="64"

    見出しテキスト

    h2.dads-h dads-size="57"

    見出しテキスト

    h2.dads-h dads-size="45"

    見出しテキスト

    h2.dads-h dads-size="36"

    見出しテキスト

    h2.dads-h dads-size="32"

    見出しテキスト

    h2.dads-h dads-size="28"

    見出しテキスト

    h2.dads-h dads-size="24"

    見出しテキスト

    h2.dads-h dads-size="20"

    見出しテキスト

    h2.dads-h dads-size="18"

    見出しテキスト

    h2.dads-h dads-size="16"

    見出しテキスト

    shoulder（hgroup 使用）

    hgroup[dads-size="36"] > h2.dads-h

    ショルダーテキスト

    見出しテキスト

    data-chip

    h2.dads-h dads-size="36" data-chip

    見出しテキスト

    hgroup[dads-size="36"][data-chip] > h2.dads-h — shoulder あり

    ショルダーテキスト

    見出しテキスト

    data-rule

    h2.dads-h dads-size="36" data-rule="8"

    見出しテキスト

    h2.dads-h dads-size="36" data-rule="6"

    見出しテキスト

    h2.dads-h dads-size="36" data-rule="4"

    見出しテキスト

    h2.dads-h dads-size="36" data-rule="2"

    見出しテキスト

    data-chip + data-rule

    h2.dads-h dads-size="36" data-chip data-rule="4"

    見出しテキスト

    Input Number

    Input Text

    ＊エラーテキストが入ります。

    Link

    リンクテキスト

    List

    List Box

    Menu List

    Notification Banner

    操作を完了できませんでした

    入力内容を確認して再度お試しください。

    送信が完了しました

    申請内容を受け付けました。

    入力内容に注意が必要です

    入力期限が近づいています。

    Progress Indicator

    ラベル ラベル
    ラベル ラベル
    ラベル ラベル

    Radio

    Resource List

    Search Box

    Select

    ＊エラーテキストが入ります。

    Step Navigation

    全4ステップ中、2ステップ目まで到達済み

    全3ステップ中、1ステップ目まで到達済み

    Table

    ラベル ラベル ラベル ラベル
    データ データ データ データ
    データ データ データ データ
    ラベル ラベル ラベル
    データデータデータ
    データデータデータ
    データデータデータ

    Textarea

    ＊エラーテキストが入ります。

    20文字以内で入力してください

    Utility Link

    リンクテキスト 同一タブリンク