Nachiguro

メニュー

Alert

お得な情報、良好な状態、注意喚起、発生中のエラーなど特別にユーザーに知らせたい事柄がある場合に使用します。

背景色には2つの modifier があり、-appearance-flatを使うとそれぞれのセマンティックな色に、-appearance-whiteを使うと白く（ダークモード時はグレー）なります。

要素は、アイコンなどを配置できる Leading と、テキスト用の Title の2つがあります。

Title の text-align を center にしたい場合は、 _bodyに-align-centerを追加することでセンター揃えにできます。
Title 内で h1~h6 のいずれかの Heading を用いると font-weight が bold になります。
また、Title 内では Heading と合わせてさらにテキストも追加することができます。
しかし、 Heading と テキストの両方が2行になってしまうと、文字数が多くなり認知の負荷が高まるため、どちらか1つのみが2行になるように調整しましょう。

Alert 内にリンクを用いたい場合は、 Alert 自体をaタグで囲みましょう。

デフォルト
お得な情報
良好な状態
注意喚起
発生中のエラー
デフォルト
お得な情報
良好な状態
注意喚起
発生中のエラー
デフォルト
お得な情報
良好な状態
注意喚起
発生中のエラー

デフォルト

モバイルで2行以上にはならないように、できるだけ簡潔に伝える。

お得な情報

モバイルで2行以上にはならないように、できるだけ簡潔に伝える。

良好な状態

モバイルで2行以上にはならないように、できるだけ簡潔に伝える。

注意喚起

モバイルで2行以上にはならないように、できるだけ簡潔に伝える。

発生中のエラー

モバイルで2行以上にはならないように、できるだけ簡潔に伝える。

デフォルト

詳しく見る

お得な情報

詳しく見る

良好な状態

詳しく見る

注意喚起

詳しく見る

発生中のエラー

詳しく見る

デフォルト

詳しく見る

お得な情報

詳しく見る

良好な状態

詳しく見る

注意喚起

詳しく見る

発生中のエラー

詳しく見る 
<div class="ncgr-alert -color-default -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <div>
      デフォルト
    </div>
  </div>
</div>
<div class="ncgr-alert -color-primary -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <div>
      お得な情報
    </div>
  </div>
</div>
<div class="ncgr-alert -color-success -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <div>
      良好な状態
    </div>
  </div>
</div>
<div class="ncgr-alert -color-warning -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <div>
      注意喚起
    </div>
  </div>
</div>
<div class="ncgr-alert -color-danger -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <div>
      発生中のエラー
    </div>
  </div>
</div>
<div class="ncgr-alert -color-default -appearance-white ncgr-mar-b-8">
  <div class="_body">
    <div>
      デフォルト
    </div>
  </div>
</div>
<div class="ncgr-alert -color-primary -appearance-white ncgr-mar-b-8">
  <div class="_body">
    <div>
      お得な情報
    </div>
  </div>
</div>
<div class="ncgr-alert -color-success -appearance-white ncgr-mar-b-8">
  <div class="_body">
    <div>
      良好な状態
    </div>
  </div>
</div>
<div class="ncgr-alert -color-warning -appearance-white ncgr-mar-b-8">
  <div class="_body">
    <div>
      注意喚起
    </div>
  </div>
</div>
<div class="ncgr-alert -color-danger -appearance-white ncgr-mar-b-8">
  <div class="_body">
    <div>
      発生中のエラー
    </div>
  </div>
</div>
<div class="ncgr-alert -color-default -appearance-flat ncgr-mar-b-8">
  <div class="_body -align-center">
    <div>
      デフォルト
    </div>
  </div>
</div>
<div class="ncgr-alert -color-primary -appearance-flat ncgr-mar-b-8">
  <div class="_body -align-center">
    <div>
      お得な情報
    </div>
  </div>
</div>
<div class="ncgr-alert -color-success -appearance-flat ncgr-mar-b-8">
  <div class="_body -align-center">
    <div>
      良好な状態
    </div>
  </div>
</div>
<div class="ncgr-alert -color-warning -appearance-flat ncgr-mar-b-8">
  <div class="_body -align-center">
    <div>
      注意喚起
    </div>
  </div>
</div>
<div class="ncgr-alert -color-danger -appearance-flat ncgr-mar-b-8">
  <div class="_body -align-center">
    <div>
      発生中のエラー
    </div>
  </div>
</div>
<div class="ncgr-alert -color-default -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      デフォルト
    </h4>
    <div>
      モバイルで2行以上にはならないように、できるだけ簡潔に伝える。
    </div>
  </div>
</div>
<div class="ncgr-alert -color-primary -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      お得な情報
    </h4>
    <div>
      モバイルで2行以上にはならないように、できるだけ簡潔に伝える。
    </div>
  </div>
</div>
<div class="ncgr-alert -color-success -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      良好な状態
    </h4>
    <div>
      モバイルで2行以上にはならないように、できるだけ簡潔に伝える。
    </div>
  </div>
</div>
<div class="ncgr-alert -color-warning -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      注意喚起
    </h4>
    <div>
      モバイルで2行以上にはならないように、できるだけ簡潔に伝える。
    </div>
  </div>
</div>
<div class="ncgr-alert -color-danger -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      発生中のエラー
    </h4>
    <div>
      モバイルで2行以上にはならないように、できるだけ簡潔に伝える。
    </div>
  </div>
</div>
<a class="ncgr-alert -color-default -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      デフォルト
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>
<a class="ncgr-alert -color-primary -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      お得な情報
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>
<a class="ncgr-alert -color-success -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      良好な状態
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>
<a class="ncgr-alert -color-warning -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      注意喚起
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>
<a class="ncgr-alert -color-danger -appearance-flat ncgr-mar-b-8">
  <div class="_body">
    <h4>
      発生中のエラー
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>
<a class="ncgr-alert -color-default -appearance-flat ncgr-mar-b-8">
  <div class="_leading">
    <div class="_icon" >
      <img src="./images/components/alert/alert-icon-white.svg">
    </div>
  </div>
  <div class="_body">
    <h4>
      デフォルト
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>
<a class="ncgr-alert -color-primary -appearance-flat ncgr-mar-b-8">
  <div class="_leading">
    <div class="_icon">
      <img src="./images/components/alert/alert-icon-white.svg">
    </div>
  </div>
  <div class="_body">
    <h4>
      お得な情報
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>
<a class="ncgr-alert -color-success -appearance-flat ncgr-mar-b-8">
  <div class="_leading">
    <div class="_icon">
      <img src="./images/components/alert/alert-icon-white.svg">
    </div>
  </div>
  <div class="_body">
    <h4>
      良好な状態
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>
<a class="ncgr-alert -color-warning -appearance-flat ncgr-mar-b-8">
  <div class="_leading">
    <div class="_icon">
      <img src="./images/components/alert/alert-icon-white.svg">
    </div>
  </div>
  <div class="_body">
    <h4>
      注意喚起
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>
<a class="ncgr-alert -color-danger -appearance-flat">
  <div class="_leading">
    <div class="_icon">
      <img src="./images/components/alert/alert-icon-white.svg">
    </div>
  </div>
  <div class="_body">
    <h4>
      発生中のエラー
    </h4>
    <div>
      詳しく見る
      <i class="fa fa-angle-right ncgr-mar-l-4"></i>
    </div>
  </div>
</a>

App Bar

アプリケーションの最上位のHeaderです。

アプリケーション本体のタイトル（またはロゴ）の表示し、サービスのブランド名の印象付けを行います。また、アプリケーションの主要アクションを行えるようにします。

さらに、ナビゲーションを行うこともできます。Headerが逆方向の遷移のみ行えるのに対し、App BarはMenuアイコンのButtonのクリックイベントでNavigation系のコンポーネント（Side NavigationまたはNavigation Drawer）を開閉し、横方向の画面遷移を行えます。

App 

<header class="ncgr-app-bar -appearance-white -brightness-light -position-static --activated">
  <div class="_content">
    <div class="_leading">
      <button aria-label="More" class="ncgr-button -appearance-transparent -shape-circle">
        <div class="_leading">
          <span class="ncgr-icon _icon" data-icon="menu"></span>
        </div>
      </button>
    </div>
    <div class="_body">
      <h1 class="_title">
        <a href="#">
          App
        </a>
      </h1>
    </div>
    <div class="_trailing">
      <div class="_list">
        <div class="_item">
          <button aria-label="Filter" class="ncgr-button -appearance-transparent -shape-circle">
            <div class="_leading">
              <span class="ncgr-icon _icon" data-icon="funnel"></span>
            </div>
          </button>
        </div>
        <div class="_item">
          <button aria-label="Share" class="ncgr-button -appearance-transparent -shape-circle">
            <div class="_leading">
              <span class="ncgr-icon _icon" data-icon="node"></span>
            </div>
          </button>
        </div>
        <div class="_item">
          <button aria-label="More" class="ncgr-button -appearance-transparent -shape-circle">
            <div class="_leading">
              <span class="ncgr-icon _icon" data-icon="ellipsis_vertical"></span>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</header>

Avatar

対象のオブジェクトがユーザーに関するものであることを明確にするために使用します。

Avatar
Avatar
Avatar 
<div class="ncgr-avatar -size-s">
  <img alt="Avatar" src="./images/components/avatar/avatar.png">
</div>
<div class="ncgr-avatar -size-m">
  <img alt="Avatar" src="./images/components/avatar/avatar.png">
</div>
<div class="ncgr-avatar -size-l">
  <img alt="Avatar" src="./images/components/avatar/avatar.png">
</div>

<div class="ncgr-skeleton-avatar -size-s">
</div>
<div class="ncgr-skeleton-avatar -size-m">
</div>
<div class="ncgr-skeleton-avatar -size-l">
</div>

Bottom Navigation

画面の下部に3〜5つの遷移先が表示されます。各ItemはIconまたは画像とラベルテキストで構成されます。ItemをタップするとそのItemが示す最上位の遷移先に移動します。

<nav class="ncgr-bottom-navigation">
  <ul class="_list">
    <li class="_item">
      <button class="_action --activated">
        <div class="_icon"><span class="ncgr-icon" data-icon="home"></span></div>
        <div class="_text">ホーム</div>
      </button>
    </li>
    <li class="_item">
      <button class="_action">
        <div class="_icon">
          <span class="ncgr-icon" data-icon="magnifying_glass"></span>
        </div>
        <div class="_text">検索</div>
      </button>
    </li>
    <li class="_item">
      <button class="_action">
        <div class="_icon"><span class="ncgr-icon" data-icon="heart"></span></div>
        <div class="_text">お気に入り</div>
      </button>
    </li>
    <li class="_item">
      <button class="_action">
        <div class="_icon"><span class="ncgr-icon" data-icon="bell"></span></div>
        <div class="_text">通知</div>
      </button>
    </li>
    <li class="_item">
      <button class="_action">
        <div class="_icon">
          <span class="ncgr-icon" data-icon="person"></span>
        </div>
        <div class="_text">あなた</div>
      </button>
    </li>
  </ul>
</nav>

Breadcrumbs

パンくずリストのコンポーネントです。 ユーザーの現在位置をわかりやすくするため、またSEO対策のために用いられます。

  1. SUZURI
  2. アイテム 
<ol class="ncgr-breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
  <li class="ncgr-breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a class="ncgr-breadcrumbs__link" itemtype="http://schema.org/Thing" itemprop="item" href="#">
      <span itemprop="name">
        SUZURI
      </span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li class="ncgr-breadcrumbs__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
    <a class="ncgr-breadcrumbs__link ncgr-breadcrumbs__link--active" itemtype="http://schema.org/Thing" itemprop="item">
      <span itemprop="name">
        アイテム
      </span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

button

.ncgr-button を指定した要素はボタンになります。 内部は_bodyでマークアップします。

<button class="ncgr-button">
  <div class="_body">button</div>
</button>

Size

.-size-{size}を指定するとそのサイズのボタンになります。

<button class="ncgr-button -size-xs">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -size-s">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -size-m">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -size-l">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -size-xl">
  <div class="_body">button</div>
</button>

Appearance

.-appearance-{appearance} を指定するとその見た目のボタンになります。

<button class="ncgr-button -appearance-flat">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -appearance-outlined">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -appearance-solid">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -appearance-white">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -appearance-transparent">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -appearance-hollow">
  <div class="_body">button</div>
</button>

State

.--{state} を指定すると、その状態のボタンになります。

<button class="ncgr-button --enabled">
  <div class="_body">button</div>
</button>
<button class="ncgr-button --hover">
  <div class="_body">button</div>
</button>
<button class="ncgr-button --focused">
  <div class="_body">button</div>
</button>
<button class="ncgr-button --disabled">
  <div class="_body">button</div>
</button>

Shape

.-shape-{shape} を指定するとその形状のボタンになります。

<button class="ncgr-button -shape-square">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -shape-circle">
  <div class="_body">button</div>
</button>

Color

.-color-{intention} を指定すると、色が変わって意味を持つボタンになります。

<button class="ncgr-button -color-neutral">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -color-negative">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -color-interactive">
  <div class="_body">button</div>
</button>
<button class="ncgr-button -color-favorite">
  <div class="_body">button</div>
</button>

Leading

_bodyの直前に_leadingでIconをマークアップすると前にアイコンがついたボタンになります。 アイコンには_iconクラスを付与します。

<button class="ncgr-button">
  <div class="_leading">
    <span class="ncgr-icon _icon" data-icon="heart"></span>
  </div>
  <div class="_body">button</div>
</button>

Leadingのみにしてアイコンのみのボタンにすることもできます。 アイコンのみのボタンにする場合はボタンの意味がわかりやすいように必ずaria-labelをつけます。

<button aria-label="Favorite" class="ncgr-button">
  <div class="_leading">
    <span class="ncgr-icon _icon" data-icon="heart"></span>
  </div>
</button>

他にもLeadingにはAvatarを入れることができます。

<button aria-label="Favorite" class="ncgr-button">
  <div class="_leading">
    <div class="ncgr-avatar -size-xs">
      <img src="https://picsum.photos/id/177/200/300">
    </div>
  </div>
</button>

Trailing

_bodyの直後に_trailingでIconをマークアップすると後にアイコンがついたボタンになります。 アイコンには_iconクラスを付与します。

<button class="ncgr-button">
  <div class="_body">button</div>
  <div class="_trailing">
    <span class="ncgr-icon _icon" data-icon="chevron_right"></span>
  </div>
</button>

Apple

.ncgr-apple-button を指定すると、Appleの色のボタンになります。

<button class="ncgr-apple-button">
  <div class="_body">button</div>
</button>

Twitter

.ncgr-twitter-button を指定すると、Twitterの色のボタンになります。

<button class="ncgr-twitter-button">
  <div class="_body">button</div>
</button>

Facebook

.ncgr-facebook-button を指定すると、Facebookの色のボタンになります。

<button class="ncgr-facebook-button">
  <div class="_body">button</div>
</button>

ニコニコ動画

.ncgr-nicovideo-button を指定すると、ニコニコ動画の色のボタンになります。

<button class="ncgr-nicovideo-button">
  <div class="_body">button</div>
</button>

LINE

.ncgr-line-button を指定すると、LINEの色のボタンになります。

<button class="ncgr-line-button">
  <div class="_body">button</div>
</button>

Skeleton

<div class="ncgr-skeleton-button">
</div>

Card

カードは情報のまとまりを作るために使用します。

寿司の盛り合わせ

サーモン、うに、いくら、かずのこ、まぐろ、鯛、ホッキ貝、えび 
<div class="ncgr-card">
  <div class="ncgr-card__cover">
    <img class="ncgr-card__cover-image" src="./images/components/card/sushi.jpg">
  </div>
  <header class="ncgr-card__header ncgr-pad-t-16 ncgr-pad-r-16 ncgr-pad-l-16">
    <h2 class="ncgr-heading -m">寿司の盛り合わせ</h2>
  </header>
  <section class="ncgr-card__contents ncgr-pad-16">
    サーモン、うに、いくら、かずのこ、まぐろ、鯛、ホッキ貝、えび
  </section>
  <footer class="ncgr-card__footer ncgr-pad-16">
    <div class="ncgr-card__avatar">
      <div class="ncgr-avatar -size-m">
        <img src="./images/components/avatar/avatar.png">
      </div>
    </div>
    <div class="ncgr-card__actions">
      <a class="ncgr-button -appearance-flat" href="#">
        <div class="_leading">
          <span class="ncgr-icon" data-icon="garbage_can"></span>
        </div>
      </a>
      <a class="ncgr-button -appearance-flat" href="#">
        <div>
          <span class="ncgr-icon" data-icon="pencil"></span>
        </div>
      </a>
    </div>
  </footer>
</div>

ncgr-card--roundedModifierを追加すると、丸みを帯びたカードになります。

丸みを帯びたカード 
<div class="ncgr-card ncgr-card--rounded">
  <div class="ncgr-pad-16">
    丸みを帯びたカード
  </div>
</div>

ncgr-card--shadowModifierを追加すると、カードにshadowがつきます。

丸みを帯びたシャドウ付きのカード 
<div class="ncgr-card ncgr-card--rounded ncgr-card--shadow">
  <div class="ncgr-pad-16">
    丸みを帯びたシャドウ付きのカード
  </div>
</div>

ncgr-card--tertiary-grouped-backgroundModifierを追加すると、カードの中に入れ子になったカードを表現することができます。

カードの中に入れ子になったカード 
<div class="ncgr-card ncgr-card--tertiary-grouped-background ncgr-card--shadow">
  <div class="ncgr-pad-16">
    カードの中に入れ子になったカード
  </div>
</div>

Checkbox

オプションのオン/オフ切り替えなどをする際に使用します。 Interactive Listのleadingやtrailingの中に入れて使用します。

オプションから選択できる項目が２つ以上の場合には(ただし任意選択を除く)、Checkboxの代わりにRadioを使用しましょう。

<div class="ncgr-interactive-list -has-background">
  <ul>
    <li class="_item">
      <label for="koga2">
        <div class="_body">
          <div class="_title">
            甲賀流
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <input class="ncgr-checkbox" type="checkbox" id="koga2">
          </div>
        </div>
      </label>
    </li>
    <li class="_item">
      <label for="iga2">
        <div class="_body">
          <div class="_title">
            伊賀流
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <input class="ncgr-checkbox" type="checkbox" id="iga2">
          </div>
        </div>
      </label>
    </li>
  </ul>
</div>
<div class="ncgr-interactive-list -has-background">
  <ul>
    <li class="_item">
      <label for="koga3">
        <div class="_leading">
          <div class="_icon">
            <input class="ncgr-checkbox" type="checkbox"" id="koga3">
          </div>
        </div>
        <div class="_body">
          <div class="_title">
            甲賀流
          </div>
        </div>
      </label>
    </li>
    <li class="_item">
      <label for="iga3">
        <div class="_leading">
          <div class="_icon">
            <input class="ncgr-checkbox" type="checkbox" id="iga3">
          </div>
        </div>
        <div class="_body">
          <div class="_title">
            伊賀流
          </div>
        </div>
      </label>
    </li>
  </ul>
</div>

Skeleton

<div class="ncgr-skeleton-checkbox"></div>

Color Selector

色を選択するためのボタンです。

<span class="ncgr-color-selector" style="background-color: white"></span>
<span class="ncgr-color-selector disabled" style="background-color: black"></span>

Container

Containerはグリッドシステムを使用する場合に必要です。

基本形

.ncgr-container は幅100%のコンテナです。 左右にboundaryに応じたgapがつきます。

100% 
<div class="ncgr-container">
  100%
</div>

サイズ

.-container-{container-width} Modifierで、Containerのmax-widthのサイズを指定します。

max-width: 540px
max-width: 720px
max-width: 1140px
<div class="ncgr-container -container-s">max-width: 540px</div>
<div class="ncgr-container -container-m">max-width: 720px</div>
<div class="ncgr-container -container-l">max-width: 1140px</div>

隙間をなくす

.-no-gaps Modifierをつけると隙間がなくなります。

隙間なし
隙間なしS
隙間なしM
隙間なしL
<div class="ncgr-container -no-gaps">隙間なし</div>
<div class="ncgr-container -container-s -no-gaps">隙間なしS</div>
<div class="ncgr-container -container-m -no-gaps">隙間なしM</div>
<div class="ncgr-container -container-l -no-gaps">隙間なしL</div>

Dialog

ページ中央に浮遊して現れるダイアログウインドウを生成するコンポーネントです。body, footerの２要素があります。 「閉じる」ボタンやタイトル、アクションボタン等を使用したい場合はApp Barコンポーネントを使用してください。

ダイアログの領域外を暗くする場合や、領域外を選択してダイアログを閉じるアクションを実装する場合は、ncgr-overlayを併せて使用してください。 また、.ncgr-dialogをアクティブにするときには、同時にbodyに.overflow-hiddenを付与してください。 下の要素のスクロールを制限し、モーダル内のスクロールの誤動作を防ぐことができます。

<div class="ncgr-overlay -active">
</div>
<div class="ncgr-dialog -active">
  <div class="ncgr-app-bar -appearance-transparent -position-static --activated">
    <div class="_content">
      <div class="_leading">
        <div class="ncgr-button -appearance-transparent -shape-circle">
          <div class="_leading">
            <span class="ncgr-icon" data-icon="arrow_left"></span>
          </div>
        </div>
      </div>
      <div class="_body">
        <h1 class="_title">
          甲賀流
        </h1>
      </div>
    </div>
  </div>
  <div class="ncgr-dialog__body">
    <div class="ncgr-pad-16">
      甲賀流（こうかりゅう）とは、近江国甲賀の地に伝わっていた忍術流派の総称。<br>
      山を一つ隔てた場所に存在する伊賀流と並び、最も有名な忍術の一派として知られる。<br>
      甲賀流伊賀流ともに伝系に関しては仮託の説が多く信用できるものはあまりない。<br>
      しかし、民家で史料が発見されるなど研究も進み、少なくとも江戸時代には確実に存在したとされている。<br>
      なお、「甲賀流」という名称の単一の流派は存在せず、あくまで甲賀に伝わる複数の流派があわさって甲賀流と呼ばれているにすぎない。<br>
    </div>
  </div>
  <div class="ncgr-dialog__footer">
    <button class="ncgr-button -appearance-transparent">
      <div class="_body">
        とじる
      </div>
    </button>
  </div>
</div>

Full Modal

画面全体の領域のモーダルを展開させるコンポーネントです。body, footerの２要素があります。 「閉じる」ボタンやタイトル、アクションボタン等を使用したい場合はApp Barコンポーネントを使用してください。

-activeのmodifierがある要素は、それを付与することでアクティブな状態になります。 また、ncgr-full-modal__contentsを付与したクラスを複数配置し、 -activeの付け外しをすることでシート内に階層を持たせることができます。

ncgr-full-modalをアクティブにするときには、同時にbodyに.overflow-hiddenを付与してください。 下の要素のスクロールを制限し、モーダル内のスクロールの誤動作を防ぐことができます。

<div class="ncgr-full-modal -active">
  <div class="ncgr-app-bar -appearance-transparent -position-static --activated">
    <div class="_content">
      <div class="_leading">
        <div class="ncgr-button -appearance-transparent -shape-circle">
          <div class="_leading">
            <span class="ncgr-icon" data-icon="arrow_left"></span>
          </div>
        </div>
      </div>
      <div class="_body">
        <h1 class="_title">
          メニュー
        </h1>
      </div>
    </div>
  </div>
  <div class="ncgr-full-modal__body">
    <div class="ncgr-full-modal__contents -active">
      <div class="ncgr-interactive-list">
        <ul>
          <li class="_item">
            <div class=_body">
              <div class="_title">
                スリスリする
              </div>
            </div>
          </li>
          <li class="_item">
            <div class=_body">
              <div class="_title">
                スリスリしない
              </div>
            </div>
          </li>
          <li class="_item">
            <div class=_body">
              <div class="_title">
                スリスリする
              </div>
            </div>
          </li>
          <li class="_item">
            <div class=_body">
              <div class="_title">
                スリスリしない
              </div>
            </div>
          </li>
        </ul>
      </ul>
    </div>
  </div>
  <div class="ncgr-full-modal__footer">
    <button class="ncgr-button -appearance-transparent">
      <div class="_body">
        とじる
      </div>
    </button>
  </div>
</div>

Grid

Gridコンポーネントを使うと12カラムのグリッドシステムでレスポンシブレイアウトを作成できます。

Gridコンポーネントは.ncgr-row, .ncgr-colでレイアウトと整列を行います。 これは flexbox で構築されています。

下記にグリッドの基本形を示します。

基本形

\.ncgr-col.-col-s-12
\.ncgr-col.-col-s-6
\.ncgr-col.-col-s-6
\.ncgr-col.-col-s-4
\.ncgr-col.-col-s-4
\.ncgr-col.-col-4
\.ncgr-col.-col-s-3
\.ncgr-col.-col-s-3
\.ncgr-col.-col-s-3
\.ncgr-col.-col-s-3
\.ncgr-col.-col-s-2
\.ncgr-col.-col-s-2
\.ncgr-col.-col-s-2
\.ncgr-col.-col-s-2
\.ncgr-col.-col-s-2
\.ncgr-col.-col-s-2
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-1
\.ncgr-col.-col-s-11
\.ncgr-col.-col-s-2
\.ncgr-col.-col-s-10
\.ncgr-col.-col-s-3
\.ncgr-col.-col-s-9
\.ncgr-col.-col-s-4
\.ncgr-col.-col-s-8
\.ncgr-col.-col-s-5
\.ncgr-col.-col-s-7
\.ncgr-col.-col-s-6
\.ncgr-col.-col-s-6 
<div class="ncgr-row">
  <div class="ncgr-col -col-s-12">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-12
    </div>
  </div>
  <div class="ncgr-col -col-s-6">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-6
    </div>
  </div>
  <div class="ncgr-col -col-s-6">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-6
    </div>
  </div>
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-4
    </div>
  </div>
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-4
    </div>
  </div>
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-4
    </div>
  </div>
  <div class="ncgr-col -col-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-3
    </div>
  </div>
  <div class="ncgr-col -col-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-3
    </div>
  </div>
  <div class="ncgr-col -col-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-3
    </div>
  </div>
  <div class="ncgr-col -col-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-3
    </div>
  </div>
  <div class="ncgr-col -col-s-2">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-2
    </div>
  </div>
  <div class="ncgr-col -col-s-2">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-2
    </div>
  </div>
  <div class="ncgr-col -col-s-2">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-2
    </div>
  </div>
  <div class="ncgr-col -col-s-2">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-2
    </div>
  </div>
  <div class="ncgr-col -col-s-2">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-2
    </div>
  </div>
  <div class="ncgr-col -col-s-2">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-2
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-11">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-11
    </div>
  </div>
  <div class="ncgr-col -col-s-2">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-2
    </div>
  </div>
  <div class="ncgr-col -col-s-10">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-10
    </div>
  </div>
  <div class="ncgr-col -col-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-3
    </div>
  </div>
  <div class="ncgr-col -col-s-9">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-9
    </div>
  </div>
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-4
    </div>
  </div>
  <div class="ncgr-col -col-s-8">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-8
    </div>
  </div>
  <div class="ncgr-col -col-s-5">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-5
    </div>
  </div>
  <div class="ncgr-col -col-s-7">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-7
    </div>
  </div>
  <div class="ncgr-col -col-s-6">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-6
    </div>
  </div>
  <div class="ncgr-col -col-s-6">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-col.-col-s-6
    </div>
  </div>
</div>

使用できるオプションは以下の通りです。

オプション

default
<480px 		Small
≥480px 		Medium
≥768px 		Large
≥1280px
コンテナーの最大幅 なし 480px 768px 1280px
Class prefix .ncgr-col.-col- .ncgr-col.-col-s- .ncgr-col.-col-m- .ncgr-col.-col-l-

横の整列

.ncgr-rowに以下の各Modifierをつけることで、横の整列位置を決めることができます。

.-justify-content-start

\.ncgr-row.-justify-content-start > .ncgr-col.-col-s-4
\.ncgr-row.-justify-content-start > .ncgr-col.-col-s-4 
<div class="ncgr-row -justify-content-start">
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-start > .ncgr-col.-col-s-4
    </div>
  </div>
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-start > .ncgr-col.-col-s-4
    </div>
  </div>
</div>

.-justify-content-center

\.ncgr-row.-justify-content-center > .ncgr-col.-col-s-4
\.ncgr-row.-justify-content-center > .ncgr-col.-col-s-4 
<div class="ncgr-row -justify-content-center">
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-center > .ncgr-col.-col-s-4
    </div>
  </div>
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-center > .ncgr-col.-col-s-4
    </div>
  </div>
</div>

.-justify-content-end

\.ncgr-row.-justify-content-end > .ncgr-col.-col-s-4
\.ncgr-row.-justify-content-end > .ncgr-col.-col-s-4 
<div class="ncgr-row -justify-content-end">
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-end > .ncgr-col.-col-s-4
    </div>
  </div>
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-end > .ncgr-col.-col-s-4
    </div>
  </div>
</div>

.-justify-content-around

\.ncgr-row.-justify-content-around > .ncgr-col.-col-s-4
\.ncgr-row.-justify-content-around > .ncgr-col.-col-s-4 
<div class="ncgr-row -justify-content-around">
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-around > .ncgr-col.-col-s-4
    </div>
  </div>
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-around > .ncgr-col.-col-s-4
    </div>
  </div>
</div>

.-justify-content-between

\.ncgr-row.-justify-content-between > .ncgr-col.-col-s-4
\.ncgr-row.-justify-content-between > .ncgr-col.-col-s-4 
<div class="ncgr-row -justify-content-between">
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-between > .ncgr-col.-col-s-4
    </div>
  </div>
  <div class="ncgr-col -col-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-justify-content-between > .ncgr-col.-col-s-4
    </div>
  </div>
</div>

縦の整列

.ncgr-rowに以下の各Modifierをつけることで、縦の整列位置を決めることができます。

.-align-items-start

\.-align-items-start > * 
<div class="ncgr-row -align-items-start" style="min-height: 10rem;">
  <div class="ncgr-col -col-s-12">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-align-items-start > *
    </div>
  </div>
</div>

.-align-items-center

\.-align-items-center > * 
<div class="ncgr-row -align-items-center" style="min-height: 10rem;">
  <div class="ncgr-col -col-s-12">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-align-items-center > *
    </div>
  </div>
</div>

.-align-items-end

\.-align-items-end > * 
<div class="ncgr-row -align-items-end" style="min-height: 10rem;">
  <div class="ncgr-col -col-s-12">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-align-items-end > *
    </div>
  </div>
</div>

空白

.ncgr-colに.-offset-*Modifierをつけると、カラムの左側に空白を作成できます。

\.-col-s-11.-offset-s-1
\.-col-s-10.-offset-s-2
\.-col-s-9.-offset-s-3
\.-col-s-8.-offset-s-4
\.-col-s-7.-offset-s-5
\.-col-s-6.-offset-s-6
\.-col-s-5.-offset-s-7
\.-col-s-4.-offset-s-8
\.-col-s-3.-offset-s-9
\.-col-s-2.-offset-s-10
\.-col-s-1.-offset-s-11 
<div class="ncgr-row">
  <div class="ncgr-col -col-s-11 -offset-s-1">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-11.-offset-s-1
    </div>
  </div>
  <div class="ncgr-col -col-s-10 -offset-s-2">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-10.-offset-s-2
    </div>
  </div>
  <div class="ncgr-col -col-s-9 -offset-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-9.-offset-s-3
    </div>
  </div>
  <div class="ncgr-col -col-s-8 -offset-s-4">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-8.-offset-s-4
    </div>
  </div>
  <div class="ncgr-col -col-s-7 -offset-s-5">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-7.-offset-s-5
    </div>
  </div>
  <div class="ncgr-col -col-s-6 -offset-s-6">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-6.-offset-s-6
    </div>
  </div>
  <div class="ncgr-col -col-s-5 -offset-s-7">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-5.-offset-s-7
    </div>
  </div>
  <div class="ncgr-col -col-s-4 -offset-s-8">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-4.-offset-s-8
    </div>
  </div>
  <div class="ncgr-col -col-s-3 -offset-s-9">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-3.-offset-s-9
    </div>
  </div>
  <div class="ncgr-col -col-s-2 -offset-s-10">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-2.-offset-s-10
    </div>
  </div>
  <div class="ncgr-col -col-s-1 -offset-s-11">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-1.-offset-s-11
    </div>
  </div>
</div>

隙間をなくす

.ncgr-rowに.-no-gapsModifierをつけると隙間がなくなります。

\.ncgr-row.-no-gaps > .ncgr-col.-col-s-3
\.ncgr-row.-no-gaps > .ncgr-col.-col-s-3
\.ncgr-row.-no-gaps > .ncgr-col.-col-s-3
\.ncgr-row.-no-gaps > .ncgr-col.-col-s-3 
<div class="ncgr-row -no-gaps">
  <div class="ncgr-col -col-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-no-gaps > .ncgr-col.-col-s-3
    </div>
  </div>
  <div class="ncgr-col -col-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-no-gaps > .ncgr-col.-col-s-3
    </div>
  </div>
  <div class="ncgr-col -col-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-no-gaps > .ncgr-col.-col-s-3
    </div>
  </div>
  <div class="ncgr-col -col-s-3">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.ncgr-row.-no-gaps > .ncgr-col.-col-s-3
    </div>
  </div>
</div>

ネスト

グリッドは以下のようにネストすることも可能です。

\.-col-s-6
\.-col-s-6
\.-col-s-6
\.-col-s-6
\.-col-s-6
\.-col-s-6 
<div class="ncgr-row">
  <div class="ncgr-col -col-s-6">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-6
      <div class="ncgr-row">
        <div class="ncgr-col -col-s-6">
          <div class="ncgr-card ncgr-card--rounded ncgr-card--tertiary-grouped-background ncgr-pad-16">
            \.-col-s-6
          </div>
        </div>
        <div class="ncgr-col -col-s-6">
          <div class="ncgr-card ncgr-card--rounded ncgr-card--tertiary-grouped-background ncgr-pad-16">
            \.-col-s-6
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ncgr-col -col-s-6">
    <div class="ncgr-card ncgr-card--rounded ncgr-pad-16">
      \.-col-s-6
      <div class="ncgr-row">
        <div class="ncgr-col -col-s-6">
          <div class="ncgr-card ncgr-card--rounded ncgr-card--tertiary-grouped-background ncgr-pad-16">
            \.-col-s-6
          </div>
        </div>
        <div class="ncgr-col -col-s-6">
          <div class="ncgr-card ncgr-card--rounded ncgr-card--tertiary-grouped-background ncgr-pad-16">
            \.-col-s-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Heading

見出しをマークアップするコンポーネントです。 h1からh6、どのタグに関わらず大きさを調整できます。

忍者スリスリ君

忍者スリスリ君

忍者スリスリ君

<h1 class="ncgr-heading -size-l">忍者スリスリ君</h1>
<h1 class="ncgr-heading -size-m">忍者スリスリ君</h1>
<h1 class="ncgr-heading -size-s">忍者スリスリ君</h1>

見出しにボーダーをつける場合はspanで入れ子にして._borderのclassをつけます。

忍者スリスリ君

忍者スリスリ君

忍者スリスリ君 

<h1 class="ncgr-heading -size-l">
  <span class="_border">
    忍者スリスリ君
  </span>
</h1>
<h1 class="ncgr-heading -size-m">
  <span class="_border">
    忍者スリスリ君
  </span>
</h1>
<h1 class="ncgr-heading -size-s">
  <span class="_border">
    忍者スリスリ君
  </span>
</h1>

Skeleton

<div class="ncgr-skeleton-heading -size-l"></div>
<div class="ncgr-skeleton-heading -size-m"></div>
<div class="ncgr-skeleton-heading -size-s"></div>

Hint

このコンポーネントを使うことで忍者スリスリくんというキャラクターを通してユーザーにコンテンツに対する一言コメントや、SUZURIを使う上でのヒントを教えます。

ヒントは内容がないものから実用的なものまで様々に用意しています。 「https://suzuri.jp/hint」にアクセスすることで確認できます。 また、内容を変更する場合はhttps://git.pepabo.com/suzuri/suzuriのconfig/locales/ja.hint.yml、config/locales/en.hint.yml、を修正します。

こんちくわマン！ 
<div class="ncgr-hint">
  <div class="ncgr-hint__sprite-anime">
  </div>
  <div class="ncgr-hint__content">
    こんちくわマン！
  </div>
</div>

Icon

<span class="ncgr-icon" data-icon="heart"></span>

Image

画像をマークアップするのに使います。

<img class="ncgr-image" src="./images/components/image/image.png">

100%にしたくない場合は.ncgr-image--fluidを付与します。

<img class="ncgr-image ncgr-image--fluid" src="./images/components/image/image.png">

画像を角丸にしたい場合は.ncgr-image--roundedを付与します。

<img class="ncgr-image ncgr-image--rounded" src="./images/components/image/image.png">

InteractiveList

選択可能なリストを表現するコンポーネントです。

Multi Line

<div class="ncgr-interactive-list">
  <h1 class="_title">Multi Line</h1>
  <ul class="_list">
    <li class="_item">
      <div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </li>
    <li class="_item --disabled">
      <div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </li>
    <li class="_item --activated">
      <div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </li>
    <li class="_item">
      <a href="#" rel="">
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div>
        </div>
      </a>
    </li>
    <li class="_item --activated">
      <a href="#" rel="">
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div>
        </div>
      </a>
    </li>
    <li class="_item">
      <button>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </button>
    </li>
    <li class="_item --activated">
      <button>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </button>
    </li>
    <li class="_item">
      <label for="SingleLineItem"
        ><div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_input">
            <input
              class="ncgr-checkbox"
              id="SingleLineItem"
              name="SingleLineItem"
              type="checkbox"
              value=""
            />
          </div></div
      ></label>
    </li>
    <li class="_item --selected">
      <label for="SingleLineItemSelected"
        ><div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_input">
            <input
              class="ncgr-checkbox"
              id="SingleLineItemSelected"
              name="SingleLineItemSelected"
              type="checkbox"
              value=""
              checked=""
            />
          </div></div
      ></label>
    </li>
    <li class="_item">
      <a href="#" rel="">
        <div class="_leading">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="home"></span>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </a>
    </li>
    <li class="_item --activated">
      <a href="#" rel="">
        <div class="_leading">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="home"></span>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </a>
    </li>
    <li class="_item">
      <button>
        <div class="_leading">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="home"></span>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </button>
    </li>
    <li class="_item --activated">
      <button>
        <div class="_leading">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="home"></span>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </button>
    </li>
    <li class="_item -is-draggable" draggable="true">
      <div>
        <div class="_leading">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="drag_handle"></span>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </li>
    <li class="_item -is-draggable" draggable="true">
      <div>
        <div class="_leading">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="drag_handle"></span>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div>
        </div>
      </div>
    </li>
    <li class="_item">
      <label for="SingleLineItemWithCheckboxLeading"
        ><div class="_leading">
          <div class="_input">
            <input
              class="ncgr-checkbox"
              id="SingleLineItemWithCheckboxLeading"
              name="SingleLineItemWithCheckboxLeading"
              type="checkbox"
              value=""
            />
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div></label
      >
    </li>
    <li class="_item">
      <label for="SingleLineItemWithCheckboxLeadingTrailing"
        ><div class="_leading">
          <div class="_input">
            <input
              class="ncgr-checkbox"
              id="SingleLineItemWithCheckboxLeadingTrailing"
              name="SingleLineItemWithCheckboxLeadingTrailing"
              type="checkbox"
              value=""
            />
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div></div
      ></label>
    </li>
    <li class="_item --selected">
      <label for="SingleLineItemWithCheckboxLeadingTrailingSelected"
        ><div class="_leading">
          <div class="_input">
            <input
              class="ncgr-checkbox"
              id="SingleLineItemWithCheckboxLeadingTrailingSelected"
              name="SingleLineItemWithCheckboxLeadingTrailingSelected"
              type="checkbox"
              value=""
              checked=""
            />
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div></div
      ></label>
    </li>
    <li class="_item">
      <label for="SingleLineItemWithRadioLeading"
        ><div class="_leading">
          <div class="_input">
            <input
              class="ncgr-radio"
              id="SingleLineItemWithRadioLeading"
              name="SingleLineItemWithRadio"
              type="radio"
              value="SingleLineItemWithRadioLeading"
            />
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div></label
      >
    </li>
    <li class="_item">
      <label for="SingleLineItemWithRadioLeadingTrailing"
        ><div class="_leading">
          <div class="_input">
            <input
              class="ncgr-radio"
              id="SingleLineItemWithRadioLeadingTrailing"
              name="SingleLineItemWithRadio"
              type="radio"
              value="SingleLineItemWithRadioLeadingTrailing"
            />
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div></div
      ></label>
    </li>
    <li class="_item --selected">
      <label for="SingleLineItemWithRadioLeadingTrailingSelected"
        ><div class="_leading">
          <div class="_input">
            <input
              class="ncgr-radio"
              id="SingleLineItemWithRadioLeadingTrailingSelected"
              name="SingleLineItemWithRadio"
              type="radio"
              value="SingleLineItemWithRadioLeadingTrailingSelected"
              checked=""
            />
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div></div
      ></label>
    </li>
    <li class="_item">
      <div>
        <div class="_leading">
          <div class="_avatar">
            <div class="ncgr-avatar">
              <img src="https://picsum.photos/id/177/200/300" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </li>
    <li class="_item">
      <a href="#" rel="">
        <div class="_leading">
          <div class="_avatar">
            <div class="ncgr-avatar">
              <img src="https://picsum.photos/id/177/200/300" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div>
        </div>
      </a>
    </li>
    <li class="_item">
      <button>
        <div class="_leading">
          <div class="_avatar">
            <div class="ncgr-avatar">
              <img src="https://picsum.photos/id/177/200/300" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div>
        </div>
      </button>
    </li>
    <li class="_item">
      <label for="SingleLineItemWithAvatar"
        ><div class="_leading">
          <div class="_avatar">
            <div class="ncgr-avatar">
              <img src="https://picsum.photos/id/177/200/300" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_input">
            <input
              class="ncgr-checkbox"
              id="SingleLineItemWithAvatar"
              name="SingleLineItemWithAvatar"
              type="checkbox"
              value=""
            />
          </div></div
      ></label>
    </li>
    <li class="_item --selected">
      <label for="SingleLineItemWithAvatarSelected"
        ><div class="_leading">
          <div class="_avatar">
            <div class="ncgr-avatar">
              <img src="https://picsum.photos/id/177/200/300" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_input">
            <input
              class="ncgr-checkbox"
              id="SingleLineItemWithAvatarSelected"
              name="SingleLineItemWithAvatarSelected"
              type="checkbox"
              value=""
              checked=""
            />
          </div></div
      ></label>
    </li>
    <li class="_item --activated">
      <a href="#" rel="">
        <div class="_leading">
          <div class="_avatar">
            <div class="ncgr-avatar">
              <img src="https://picsum.photos/id/177/200/300" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div>
        </div>
      </a>
    </li>
    <li class="_item">
      <div>
        <div class="_leading">
          <div class="_media -size-s">
            <div class="_thumbnail">
              <img src="https://picsum.photos/id/219/200/200" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
      </div>
    </li>
    <li class="_item">
      <a href="#" rel="">
        <div class="_leading">
          <div class="_media -size-s">
            <div class="_thumbnail">
              <img src="https://picsum.photos/id/219/200/200" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div>
        </div>
      </a>
    </li>
    <li class="_item">
      <button>
        <div class="_leading">
          <div class="_media -size-s">
            <div class="_thumbnail">
              <img src="https://picsum.photos/id/219/200/200" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div>
        </div>
      </button>
    </li>
    <li class="_item">
      <label for="SingleLineItemWithImage"
        ><div class="_leading">
          <div class="_media -size-s">
            <div class="_thumbnail">
              <img src="https://picsum.photos/id/219/200/200" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_input">
            <input
              class="ncgr-checkbox"
              id="SingleLineItemWithImage"
              name="SingleLineItemWithImage"
              type="checkbox"
              value=""
            />
          </div></div
      ></label>
    </li>
    <li class="_item --selected">
      <label for="SingleLineItemWithImageSelected"
        ><div class="_leading">
          <div class="_media -size-s">
            <div class="_thumbnail">
              <img src="https://picsum.photos/id/219/200/200" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_input">
            <input
              class="ncgr-checkbox"
              id="SingleLineItemWithImageSelected"
              name="SingleLineItemWithImageSelected"
              type="checkbox"
              value=""
              checked=""
            />
          </div></div
      ></label>
    </li>
    <li class="_item --activated">
      <a href="#" rel="">
        <div class="_leading">
          <div class="_media -size-s">
            <div class="_thumbnail">
              <img src="https://picsum.photos/id/219/200/200" />
            </div>
          </div>
        </div>
        <div class="_body">
          <div class="_title">Lorem ipsum dolor sit amet,</div>
          <div class="_description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </div>
        </div>
        <div class="_trailing">
          <div class="_icon">
            <span class="ncgr-icon" data-icon="chevron_right"></span>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

Skeleton

<div class="ncgr-skeleton-interactive-list">
  <ul class="_list">
    <li class="_item">
      <div>
        <div class="_body">
          <div class="_title"><span class="_skeleton"></span></div>
          <div class="_description"><span class="_skeleton"></span></div>
        </div>
      </div>
    </li>
    <li class="_item">
      <div>
        <div class="_body">
          <div class="_title"><span class="_skeleton"></span></div>
          <div class="_description"><span class="_skeleton"></span></div>
        </div>
        <div class="_trailing">
          <div class="_input"><div class="ncgr-skeleton-checkbox"></div></div>
        </div>
      </div>
    </li>
    <li class="_item">
      <div>
        <div class="_leading">
          <div class="_input"><div class="ncgr-skeleton-checkbox"></div></div>
        </div>
        <div class="_body">
          <div class="_title"><span class="_skeleton"></span></div>
          <div class="_description"><span class="_skeleton"></span></div>
        </div>
      </div>
    </li>
    <li class="_item">
      <div>
        <div class="_leading">
          <div class="_input"><div class="ncgr-skeleton-radio"></div></div>
        </div>
        <div class="_body">
          <div class="_title"><span class="_skeleton"></span></div>
          <div class="_description"><span class="_skeleton"></span></div>
        </div>
      </div>
    </li>
    <li class="_item">
      <div>
        <div class="_leading">
          <div class="_avatar"><div class="ncgr-skeleton-avatar"></div></div>
        </div>
        <div class="_body">
          <div class="_title"><span class="_skeleton"></span></div>
          <div class="_description"><span class="_skeleton"></span></div>
        </div>
      </div>
    </li>
    <li class="_item">
      <div>
        <div class="_leading">
          <div class="_avatar"><div class="ncgr-skeleton-avatar"></div></div>
        </div>
        <div class="_body">
          <div class="_title"><span class="_skeleton"></span></div>
          <div class="_description"><span class="_skeleton"></span></div>
        </div>
        <div class="_trailing">
          <div class="_input"><div class="ncgr-skeleton-checkbox"></div></div>
        </div>
      </div>
    </li>
    <li class="_item">
      <div>
        <div class="_leading">
          <div class="_media -size-s">
            <div class="_thumbnail"><span class="_skeleton"></span></div>
          </div>
        </div>
        <div class="_body">
          <div class="_title"><span class="_skeleton"></span></div>
          <div class="_description"><span class="_skeleton"></span></div>
        </div>
      </div>
    </li>
    <li class="_item">
      <div>
        <div class="_leading">
          <div class="_media -size-s">
            <div class="_thumbnail"><span class="_skeleton"></span></div>
          </div>
        </div>
        <div class="_body">
          <div class="_title"><span class="_skeleton"></span></div>
          <div class="_description"><span class="_skeleton"></span></div>
        </div>
        <div class="_trailing">
          <div class="_input"><div class="ncgr-skeleton-checkbox"></div></div>
        </div>
      </div>
    </li>
  </ul>
</div>

Interactive Table

商品やユーザーなど、あるオブジェクトの集合とInteractiveにやりとりするためのTableを提供します。

アイテム名 価格 個数
Tシャツ 2,000円 10
トートバッグ 1,000円 10 
<table class="ncgr-interactive-table">
  <tbody>
    <tr>
      <th style="width: 80px;">アイテム名</th>
      <th>価格</th>
      <th class="-align-end">個数</th>
    </tr>
    <tr>
      <td>Tシャツ</td>
      <td>2,000円</td>
      <td class="-align-end">10</td>
    </tr>
    <tr>
      <td>トートバッグ</td>
      <td>1,000円</td>
      <td class="-align-end">10</td>
    </tr>
  </tbody>
</table>

Skeleton

 
<table class="ncgr-skeleton-interactive-table" arealabel="Products">
  <thead class="-is-sticky">
    <tr>
      <th style="width: 4.5rem"><div class="ncgr-skeleton-checkbox"></div></th>
      <th style="width: 5.5rem"></th>
      <th role="columnheader" scope="col" style="width: 6rem">
        <span class="_skeleton"></span>
      </th>
      <th
        class="-align-end"
        role="columnheader"
        scope="col"
        style="width: 8rem"
      >
        <span class="_skeleton"></span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div class="ncgr-skeleton-checkbox"></div></td>
      <td>
        <div class="_media">
          <div class="_thumbnail"><span class="_skeleton"></span></div>
        </div>
      </td>
      <td><span class="_skeleton"></span></td>
      <td class="-align-end"><span class="_skeleton"></span></td>
    </tr>
    <tr>
      <td><div class="ncgr-skeleton-checkbox"></div></td>
      <td>
        <div class="_media">
          <div class="_thumbnail"><span class="_skeleton"></span></div>
        </div>
      </td>
      <td><span class="_skeleton"></span></td>
      <td class="-align-end"><span class="_skeleton"></span></td>
    </tr>
    <tr>
      <td><div class="ncgr-skeleton-checkbox"></div></td>
      <td>
        <div class="_media">
          <div class="_thumbnail"><span class="_skeleton"></span></div>
        </div>
      </td>
      <td><span class="_skeleton"></span></td>
      <td class="-align-end"><span class="_skeleton"></span></td>
    </tr>
    <tr>
      <td><div class="ncgr-skeleton-checkbox"></div></td>
      <td>
        <div class="_media">
          <div class="_thumbnail"><span class="_skeleton"></span></div>
        </div>
      </td>
      <td><span class="_skeleton"></span></td>
      <td class="-align-end"><span class="_skeleton"></span></td>
    </tr>
    <tr>
      <td><div class="ncgr-skeleton-checkbox"></div></td>
      <td>
        <div class="_media">
          <div class="_thumbnail"><span class="_skeleton"></span></div>
        </div>
      </td>
      <td><span class="_skeleton"></span></td>
      <td class="-align-end"><span class="_skeleton"></span></td>
    </tr>
    <tr>
      <td><div class="ncgr-skeleton-checkbox"></div></td>
      <td>
        <div class="_media">
          <div class="_thumbnail"><span class="_skeleton"></span></div>
        </div>
      </td>
      <td><span class="_skeleton"></span></td>
      <td class="-align-end"><span class="_skeleton"></span></td>
    </tr>
  </tbody>
</table>

Label

リストやテーブル、カードなどの状態を表すために使用します。

非表示 表示 成功 注意 必須 
<span class="ncgr-label ncgr-label--default">非表示</span>
<span class="ncgr-label ncgr-label--primary">表示</span>
<span class="ncgr-label ncgr-label--success">成功</span>
<span class="ncgr-label ncgr-label--warning">注意</span>
<span class="ncgr-label ncgr-label--danger">必須</span>

List

.ncgr-ulを指定すると黒丸のリストになります。

<ul class="ncgr-ul">
  <li>臨</li>
  <li>兵</li>
  <li>闘</li>
  <li>者</li>
  <li>皆</li>
  <li>陣</li>
  <li>烈</li>
  <li>在</li>
  <li>前</li>
</ul>

.ncgr-olを指定すると算用数字のリストになります。

  1. 臨
  2. 兵
  3. 闘
  4. 者
  5. 皆
  6. 陣
  7. 烈
  8. 在
  9. 前
<ol class="ncgr-ol">
  <li>臨</li>
  <li>兵</li>
  <li>闘</li>
  <li>者</li>
  <li>皆</li>
  <li>陣</li>
  <li>烈</li>
  <li>在</li>
  <li>前</li>
</ul>

ListView

選択可能なリストを表現するコンポーネントです。

リスト内の要素は、ユーザーアイコンなどの要素を配置できるleadingと、テキスト用のtitle、アクションボタン等ほかの要素を配置できるtrailingに分かれています。

textには、PrimaryとSecondaryの二つの属性を持った文章を格納でき、これにより複数行のリストを作成することが可能です。

タイトルが2行になる場合、.ncgr-list-viewに-two-lineのmodifierを付与してください。それによりleading内の要素が適した位置に調整されます。

タイトルが3行以上になる場合、.ncgr-list-viewに-multi-lineのmodifierを付与してください。それによりleading及び、trailing内の要素が適した位置に調整されます。

また、.ncgr-list-viewに-denseのmodifierを付与すると、リストの上下paddingが半分のサイズになります。

少ない情報からさらに詳しい情報を見せたい場合には、伸縮するカードを生成できるExpansion Listのオプションを使用してください。

One-line
  • One-line item
  • One-line item
  • One-line item
  • One-line item
  • One-line item
  • One-line item
  • One-line item
  • One-line item
  • One-line item
Two-line
  • Two-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Two-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Two-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Two-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Two-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Two-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Two-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Two-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Two-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Multi-line
  • Multi-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Multi-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Multi-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Multi-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Multi-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Multi-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Multi-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Multi-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Multi-line item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • メールを受信する
甲賀流（こうかりゅう）とは、近江国甲賀の地に伝わっていた忍術流派の総称。
山を一つ隔てた場所に存在する伊賀流と並び、最も有名な忍術の一派として知られる。
甲賀流伊賀流ともに伝系に関しては仮託の説が多く信用できるものはあまりない。
しかし、民家で史料が発見されるなど研究も進み、少なくとも江戸時代には確実に存在したとされている。
なお、「甲賀流」という名称の単一の流派は存在せず、あくまで甲賀に伝わる複数の流派があわさって甲賀流と呼ばれているにすぎない。
伊賀流（いがりゅう）は、伊賀国の地に伝わっていた忍術流派の総称。
甲賀流と並んで忍術の中で最も有名な流派の一つである。
根拠地は、現在の三重県伊賀市と名張市にあった。
普段は農業や行商をして各地の情報を探る一方、指令が下ると戦場やその後方へ出向き、工作活動に励んだ。 
<section class="ncgr-list-group">
  <div class="ncgr-list-group__subheader">
    One-line
  </div>
  <ul class="ncgr-list-view">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          One-line item
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          One-line item
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          One-line item
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
  <ul class="ncgr-list-view">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-list-tile__icon">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          One-line item
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-list-tile__icon">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          One-line item
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-list-tile__icon">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          One-line item
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
  <ul class="ncgr-list-view">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-avatar -m">
          <img class="ncgr-avatar__image" src="./images/components/avatar/avatar.png">
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          One-line item
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-avatar -m">
          <img class="ncgr-avatar__image" src="./images/components/avatar/avatar.png">
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          One-line item
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-avatar -m">
          <img class="ncgr-avatar__image" src="./images/components/avatar/avatar.png">
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          One-line item
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
</section>
<section class="ncgr-list-group">
  <div class="ncgr-list-group__subheader">
    Two-line
  </div>
  <ul class="ncgr-list-view -two-line">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Two-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Two-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Two-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
  <ul class="ncgr-list-view -two-line">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-list-tile__icon">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Two-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-list-tile__icon">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Two-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-list-tile__icon">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Two-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
  <ul class="ncgr-list-view -two-line">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-avatar -m">
          <img class="ncgr-avatar__image" src="./images/components/avatar/avatar.png">
        </div>
      </div>
      <div class="ncgr-list-tile__title">
         <div class="ncgr-list-tile__primary-title">
          Two-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-avatar -m">
          <img class="ncgr-avatar__image" src="./images/components/avatar/avatar.png">
        </div>
      </div>
      <div class="ncgr-list-tile__title">
         <div class="ncgr-list-tile__primary-title">
          Two-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-avatar -m">
          <img class="ncgr-avatar__image" src="./images/components/avatar/avatar.png">
        </div>
      </div>
      <div class="ncgr-list-tile__title">
         <div class="ncgr-list-tile__primary-title">
          Two-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
</section>
<section class="ncgr-list-group">
  <div class="ncgr-list-group__subheader">
    Multi-line
  </div>
  <ul class="ncgr-list-view -multi-line">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Multi-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Multi-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Multi-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
  <ul class="ncgr-list-view -multi-line">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-list-tile__icon">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Multi-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-list-tile__icon">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Multi-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-list-tile__icon">
          <i class="fab fa-bluetooth-b"></i>
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Multi-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
  <ul class="ncgr-list-view -multi-line">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-avatar -m">
          <img class="ncgr-avatar__image" src="./images/components/avatar/avatar.png">
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Multi-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-avatar -m">
          <img class="ncgr-avatar__image" src="./images/components/avatar/avatar.png">
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Multi-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__leading">
        <div class="ncgr-avatar -m">
          <img class="ncgr-avatar__image" src="./images/components/avatar/avatar.png">
        </div>
      </div>
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          Multi-line item
        </div>
        <div class="ncgr-list-tile__secondary-title">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <div class="ncgr-list-tile__icon">
          <i class="fas fa-ellipsis-v"></i>
        </div>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
  <ul class="ncgr-list-view">
    <li class="ncgr-list-tile">
      <div class="ncgr-list-tile__title">
        <div class="ncgr-list-tile__primary-title">
          メールを受信する
        </div>
      </div>
      <div class="ncgr-list-tile__trailing">
        <label class="ncgr-switch">
          <input type="checkbox" checked>
          <i></i>
        </label>
      </div>
    </li>
  </ul>
  <hr class="ncgr-list-divider">
  <div class="ncgr-list-view">
    <input id="koga_listview" class="ncgr-list-tile__expansion-checkbox" type="checkbox">  
    <label for="koga_listview">
      <div class="ncgr-list-tile">
        <div class="ncgr-list-tile__title">
          <div class="ncgr-list-tile__primary-title">
            甲賀流
          </div>
          <div class="ncgr-list-tile__secondary-title">
            近江国甲賀の地に伝わっていた忍術流派の総称
          </div>
        </div>
        <div class="ncgr-list-tile__trailing">
          <div class="ncgr-list-tile__icon -toggle">
            <i class="fa fa-angle-down"></i>
          </div>
        </div>
      </div>
    </label>
    <div class="ncgr-list-tile__expansion-body">
      甲賀流（こうかりゅう）とは、近江国甲賀の地に伝わっていた忍術流派の総称。<br>
      山を一つ隔てた場所に存在する伊賀流と並び、最も有名な忍術の一派として知られる。<br>
      甲賀流伊賀流ともに伝系に関しては仮託の説が多く信用できるものはあまりない。<br>
      しかし、民家で史料が発見されるなど研究も進み、少なくとも江戸時代には確実に存在したとされている。<br>
      なお、「甲賀流」という名称の単一の流派は存在せず、あくまで甲賀に伝わる複数の流派があわさって甲賀流と呼ばれているにすぎない。
    </div>
  </div>
  <hr class="ncgr-list-divider">
  <div class="ncgr-list-view">
    <input id="iga_listview" class="ncgr-list-tile__expansion-checkbox" type="checkbox">  
    <label for="iga_listview">
      <div class="ncgr-list-tile">
        <div class="ncgr-list-tile__title">
          <div class="ncgr-list-tile__primary-title">
            伊賀流
          </div>
          <div class="ncgr-list-tile__secondary-title">
            伊賀国の地に伝わっていた忍術流派の総称
          </div>
        </div>
        <div class="ncgr-list-tile__trailing">
          <div class="ncgr-list-tile__icon -toggle">
            <i class="fa fa-angle-down"></i>
          </div>
        </div>
      </div>
    </label>
    <div class="ncgr-list-tile__expansion-body">
      伊賀流（いがりゅう）は、伊賀国の地に伝わっていた忍術流派の総称。<br>
      甲賀流と並んで忍術の中で最も有名な流派の一つである。<br>
      根拠地は、現在の三重県伊賀市と名張市にあった。<br>
      普段は農業や行商をして各地の情報を探る一方、指令が下ると戦場やその後方へ出向き、工作活動に励んだ。
    </div>
  </div>
</section>

Overlay

Dialog, Semi Modal等を使用する際に、それらの領域外を覆うためのコンポーネントです。 それらのウインドウ外の領域が暗くなり、ユーザーをコンテンツに集中させやすくすることができるほか、ウインドウの領域外を選択して閉じるアクションを実装できるようになります。

.ncgr-overlay, 並びに併用するコンポーネントをアクティブにするときには、同時にbodyに.overflow-hiddenを付与してください。 下の要素のスクロールを制限し、モーダル内のスクロールの誤動作を防ぐことができます。

<div class="ncgr-overlay -active">
</div>

Radio

オプションの選択をする際に使用します。 Interactive Listのleadingの中に入れて使用します。

<div class="ncgr-interactive-list">
  <ul>
    <li class="_item">
      <label for="koga">
        <div class="_leading">
          <div class="_icon">
            <input class="ncgr-radio" type="radio" name="ninja" value="koga" id="koga" />
          </div>
        </div>
        <div class="_body">
          <div class="_title">
            甲賀流
          </div>
        </div>
      </label>
    </li>
    <li class="_item">
      <label for="iga">
        <div class="_leading">
          <div class="_icon">
            <input class="ncgr-radio" type="radio" name="ninja" value="iga" id="iga" />
          </div>
        </div>
        <div class="_body">
          <div class="_title">
            伊賀流
          </div>
        </div>
      </label>
    </li>
  </ul>
</div>

Skeleton

<div class="ncgr-skeleton-radio"></div>

Section

各セクションをマークアップするのに使用します。

主に見出しコンポーネントの.-mとあわせて使用します。

近頃ウワサのあのショップ

<section class="ncgr-section">
  <h2 class="ncgr-heading -m">近頃ウワサのあのショップ</h2>
</section>

sectionの背景色は.ncgr-section--background、.ncgr-section--secondary-background、.ncgr-section--grouped-backgroundのようにセマンティックカラーで指定します。

近頃ウワサのあのショップ

近頃ウワサのあのショップ

近頃ウワサのあのショップ

<section class="ncgr-section ncgr-section--background">
  <h2 class="ncgr-heading -m">近頃ウワサのあのショップ</h2>
</section>

<section class="ncgr-section ncgr-section--secondary-background">
  <h2 class="ncgr-heading -m">近頃ウワサのあのショップ</h2>
</section>

<section class="ncgr-section ncgr-section--grouped-background">
  <h2 class="ncgr-heading -m">近頃ウワサのあのショップ</h2>
</section>

Selectbox (Deprecated)

色やサイズなどの複数の選択肢からオプションの選択ができます。このコンポーネントは3つ以上の選択肢が存在する場合にのみ使用できます。2つまでの選択肢のときは一覧性が低くなってしまうので、Radioを使用するようにしましょう。

<div class="ncgr-selectbox">
  <label class="ncgr-selectbox__label">種族</label>
  <select id="tribe" name="tribe">
    <option selected="selected" value="01">忍者</option>
    <option value="02">人間</option>
  </select>
  <i class="fas fa-caret-down"></i>
</div>

Semi Modal

画面一部の領域にモーダルを展開させるコンポーネントです。 「閉じる」ボタンやタイトル、アクションボタン等を使用したい場合はApp Barコンポーネントを使用してください。

-activeのmodifierがある要素は、それを付与することでアクティブな状態になります。 また、ncgr-semi-modal__contentsを付与したクラスを複数配置し、 -activeの付け外しをすることでシート内に階層を持たせることができます。

.semi-modalをアクティブにするときには、同時にbodyに.overflow-hiddenを付与してください。 下の要素のスクロールを制限し、モーダル内のスクロールの誤動作を防ぐことができます。

<div class="ncgr-overlay -active"></div>
<div class="ncgr-semi-modal -active">
  <div class="ncgr-app-bar -appearance-transparent -position-static --activated">
    <div class="_content">
      <div class="_leading">
        <div class="ncgr-button -appearance-transparent -shape-circle">
          <div class="_leading">
            <span class="ncgr-icon" data-icon="arrow_left"></span>
          </div>
        </div>
      </div>
      <div class="_body">
        <h1 class="_title">
          メニュー
        </h1>
      </div>
    </div>
  </div>
  <div class="ncgr-semi-modal__body">
    <div class="ncgr-semi-modal__contents -active">
      <div class="ncgr-interactive-list">
        <ul> 
          <li class="_item">
            <div class="_body">
              <div class="_title">
                スリスリする
              </div>
            </div>
          </li>
          <li class="_item">
            <div class="_body">
              <div class="_title">
                スリスリしない
              </div>
            </div>
          </li>
          <li class="_item">
            <div class="_body">
              <div class="_title">
                スリスリする
              </div>
            </div>
          </li>
          <li class="_item">
            <div class="_body">
              <div class="_title">
                スリスリしない
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Separator

各要素を区切るのに使います。

<hr class="ncgr-separator">

Sequence

カート画面などで今の状態を表すコンポーネントです。 .ncgr-sequence__itemにncgr-sequence__item--activeのModifierを付与するとアクティブな状態になります。

  • 入力
  • 確認
  • 完了 
<div class="ncgr-sequence">
  <ul class="ncgr-sequence__items">
    <li class="ncgr-sequence__item ncgr-sequence__item--active">
      入力
    </li>
    <li class="ncgr-sequence__item ncgr-sequence__item--active">
      確認
    </li>
    <li class="ncgr-sequence__item">
      完了
    </li>
  </ul>
</div>

Side Navigation

デスクトップや大型タブレットなどの大きな画面かつ横方向の画面遷移が必要な場合に使用します。画面の端に3つ以上の遷移先が表示されます。

<aside class="ncgr-side-navigation --activated">
  <div class="_header">
    <div class="ncgr-interactive-list -density-normal">
      <ul class="_list">
        <li class="_item">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_avatar">
                <div class="ncgr-avatar">
                  <img src="https://picsum.photos/id/177/200/300" />
                </div>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                User
              </div>
            </div>
            <div class="_trailing">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <nav>
    <div class="ncgr-interactive-list -density-normal">
      <ul class="_list">
        <li class="_item --activated">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="home"></span>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                ホーム
              </div>
            </div>
          </a>
        </li>
        <li class="_item">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="magnifying_glass"></span>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                検索
              </div>
            </div>
          </a>
        </li>
        <li class="_item">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="heart"></span>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                お気に入り
              </div>
            </div>
          </a>
        </li>
        <li class="_item">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="bell"></span>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                通知
              </div>
            </div>
          </a>
        </li>
        <li class="_item">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="person"></span>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                あなた
              </div>
            </div>
          </a>
        </li>
        <li class="_item">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="gear"></span>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                設定
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="ncgr-interactive-list -density-normal">
      <h2 class="_title">ブックマーク</h2>
      <ul class="_list">
        <li class="_item">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="star"></span>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                ブックマーク
              </div>
            </div>
          </a>
        </li>
        <li class="_item">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="star"></span>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                ブックマーク
              </div>
            </div>
          </a>
        </li>
        <li class="_item">
          <a href="#" rel="">
            <div class="_leading">
              <div class="_icon">
                <span class="ncgr-icon" data-icon="star"></span>
              </div>
            </div>
            <div class="_body">
              <div class="_title">
                ブックマーク
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</aside>

Skeleton

任意のSkeletonを作成できます。

<div class="ncgr-skeleton" style="width: 3rem; height: 3rem;"></div>

Skeleton Textを作成できます。

-size-{size} Modifierをつけると、そのサイズになります。

<span class="ncgr-skeleton-text -size-xxs"></span>
<span class="ncgr-skeleton-text -size-xs"></span>
<span class="ncgr-skeleton-text -size-s"></span>
<span class="ncgr-skeleton-text -size-m"></span>
<span class="ncgr-skeleton-text -size-l"></span>
<span class="ncgr-skeleton-text -size-xl"></span>
<span class="ncgr-skeleton-text -size-xxl"></span>
<span class="ncgr-skeleton-text -size-xxxl"></span>

-density-{density} Modifierをつけると、その密度になります。

<span class="ncgr-skeleton-text -density-dense"></span>
<span class="ncgr-skeleton-text -density-normal"></span>
<span class="ncgr-skeleton-text -density-comfort"></span>

Square Radio

色や大きさ、アングル等を選択できるボタンコンポーネントです。

色を選択する場合は以下のようにマークアップします。

<span class="ncgr-square-radio ncgr-square-radio--color" style="background-color: white"></span>
<span class="ncgr-square-radio ncgr-square-radio--color selected" style="background-color: black"></span>
<span class="ncgr-square-radio ncgr-square-radio--color disabled" style="background-color: red"></span>

画像で大きさ、アングルを選択する場合は以下のようにマークアップします。

<img class="ncgr-square-radio ncgr-square-radio--image" src="./images/components/square-radio/product1.jpg">
<img class="ncgr-square-radio ncgr-square-radio--image selected" src="./images/components/square-radio/product2.jpg">

Switch

スイッチは、2つの状態を切り替えるために使用します。スイッチの状態はオンまたはオフのいずれかです。インターフェイスが乱雑になるので状態を説明するラベルをつけるのは避けてください。

<label class="ncgr-switch">
  <input type="checkbox" checked>
  <i></i>
</label>
<label class="ncgr-switch">
  <input type="checkbox">
  <i></i>
</label>
<label class="ncgr-switch">
  <input type="checkbox" checked disabled>
  <i></i>
</label>
<label class="ncgr-switch">
  <input type="checkbox" disabled>
  <i></i>
</label>

Tab

ある画面の中で複数の画面が存在し、それを切り替える場合には .ncgr-horizontal-tab を使用します。 項目の数はなるべく5つ以下にとどめるようにし、どうしてもそれより数が多くなる場合は画面の高さを圧迫しないように、折り返すのではなく、横スクロールでアクセスできるようにします。

左が一番優先順位が高くデフォルト位置であるべきであり、右に行くほど優先順位が低くなります。 この場合、隠れてしまうボタンは基本的には押されない前提で設計するべきでしょう。

<nav class="ncgr-horizontal-tab">
  <ul>
    <li>
      <a class="-active" href="#">
        アイテム
      </a>
    </li>
    <li>
      <a href="#">
        オモイデ
      </a>
    </li>
    <li>
      <a href="#">
        ズッキュン
      </a>
    </li>
    <li>
      <a href="#">
        ジャーナル
      </a>
    </li>
  </ul>
</nav>

また、デスクトップサイズのとき、縦に並べたい場合は .ncgr-vertical-tab を使用します。

<nav class="ncgr-vertical-tab">
  <ul>
    <li>
      <a class="-active" href="#">
        アイテム
      </a>
    </li>
    <li>
      <a href="#">
        オモイデ
      </a>
    </li>
    <li>
      <a href="#">
        ズッキュン
      </a>
    </li>
    <li>
      <a href="#">
        ジャーナル
      </a>
    </li>
  </ul>
</nav>

Table

テーブルをマークアップするときに使います。

流派 説明
伊賀 伊賀流（いがりゅう）は、伊賀国の地に伝わっていた忍術流派の総称。甲賀流と並んで忍術の中で最も有名な流派の一つである。根拠地は、現在の三重県伊賀市と名張市にあった。普段は農業や行商をして各地の情報を探る一方、指令が下ると戦場やその後方へ出向き、工作活動に励んだ。
甲賀 甲賀流（こうかりゅう）とは、近江国甲賀の地に伝わっていた忍術流派の総称。山を一つ隔てた場所に存在する伊賀流と並び、最も有名な忍術の一派として知られる。甲賀流伊賀流ともに伝系に関しては仮託の説が多く信用できるものはあまりない。しかし、民家で史料が発見されるなど研究も進み、少なくとも江戸時代には確実に存在したとされている。なお、「甲賀流」という名称の単一の流派は存在せず、あくまで甲賀に伝わる複数の流派があわさって甲賀流と呼ばれているにすぎない。甲賀は「こうか」と読むが、「こうが」と誤った読み方をされることも多い。 
  <table class="ncgr-table">
    <tbody>
      <tr>
        <th style="width: 80px;">流派</th>
        <th>説明</th>
      </tr>
      <tr>
        <td>伊賀</td>
        <td>伊賀流（いがりゅう）は、伊賀国の地に伝わっていた忍術流派の総称。甲賀流と並んで忍術の中で最も有名な流派の一つである。根拠地は、現在の三重県伊賀市と名張市にあった。普段は農業や行商をして各地の情報を探る一方、指令が下ると戦場やその後方へ出向き、工作活動に励んだ。</td>
      </tr>
      <tr>
        <td>甲賀</td>
        <td>甲賀流（こうかりゅう）とは、近江国甲賀の地に伝わっていた忍術流派の総称。山を一つ隔てた場所に存在する伊賀流と並び、最も有名な忍術の一派として知られる。甲賀流伊賀流ともに伝系に関しては仮託の説が多く信用できるものはあまりない。しかし、民家で史料が発見されるなど研究も進み、少なくとも江戸時代には確実に存在したとされている。なお、「甲賀流」という名称の単一の流派は存在せず、あくまで甲賀に伝わる複数の流派があわさって甲賀流と呼ばれているにすぎない。甲賀は「こうか」と読むが、「こうが」と誤った読み方をされることも多い。</td>
      </tr>
    </tbody>
  </table>

Text field

.ncgr-text-field を指定した要素はText fieldになります。

<div class="ncgr-text-field">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field">
  <label class="_label" for="name">日付</label>
  <div class="_control">
    <input class="_input" type="date" name="name">
  </div>
</div>
<div class="ncgr-text-field">
  <label class="_label" for="name">時間</label>
  <div class="_control">
    <input class="_input" type="time" name="name">
  </div>
</div>
<div class="ncgr-text-field">
  <label class="_label" for="name">数字</label>
  <div class="_control">
    <input class="_input" type="number" name="name">
  </div>
</div>
<div class="ncgr-text-field">
  <label class="_label" for="name">自己紹介</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>

Size

.-size-{size}を指定するとそのサイズになります。

<div class="ncgr-text-field -size-xs">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-s">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-m">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-l">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-xl">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>

<div class="ncgr-text-field -size-xs">
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field -size-s">
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field -size-m">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field -size-l">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field -size-xl">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>

<div class="ncgr-text-field -size-xs">
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-s">
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-m">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-l">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-xl">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>

Color

.-color-{intention} を指定すると、色が変わって意味を持ちます。

<div class="ncgr-text-field -color-neutral">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -color-positive">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -color-negative">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -color-notice">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>

<div class="ncgr-text-field -color-neutral">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field -color-positive">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field -color-negative">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field -color-notice">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>

<div class="ncgr-text-field -color-neutral">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-positive">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-negative">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>

Width

.-width-{width} を指定すると、親要素に対しての幅を決定できます。

<div class="ncgr-text-field  -width-full">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field  -width-half">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field  -width-third">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>

<div class="ncgr-text-field  -width-full">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field  -width-half">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field  -width-third">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>

<div class="ncgr-text-field -width-full">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -width-half">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -width-third">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>

Align

.-align-{align} を指定すると、inputのテキストの揃え位置を決定できます。

<div class="ncgr-text-field -align-start">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -align-end">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
個
個 
<div class="ncgr-text-field -align-start">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="∞">
    <div class="_trailing">
      <div class="_text">
        個
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -align-end">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="∞">
    <div class="_trailing">
      <div class="_text">
        個
      </div>
    </div>
  </div>
</div>

State

.--{state} を指定すると、その状態になります。

<div class="ncgr-text-field --enabled">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field --hover">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field --focused">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field --disabled">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" disabled placeholder="スリスリ君">
  </div>
</div>

<div class="ncgr-text-field --enabled">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field --hover">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field --focused">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
  </div>
</div>
<div class="ncgr-text-field --disabled">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <textarea class="_input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。" disabled></textarea>
  </div>
</div>

<div class="ncgr-text-field --enabled">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field --hover">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field --focused">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe">
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field --disabled">
  <label class="_label" for="tribe">種族</label>
  <div class="_control">
    <select class="_input" id="tribe" name="tribe" disabled>
      <option selected="selected" value="01">忍者</option>
      <option value="02">人間</option>
    </select>
    <div class="_trailing">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="arrow_drop_down"></span>
      </div>
    </div>
  </div>
</div>

Leading

_inputの直前に_leadingをいれることができます。

Icon

Iconには_iconクラスを付与します。

<div class="ncgr-text-field -size-xs">
  <div class="_control">
    <div class="_leading">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="magnifying_glass"></span>
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-s">
  <div class="_control">
    <div class="_leading">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="magnifying_glass"></span>
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-m">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <div class="_leading">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="magnifying_glass"></span>
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-l">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <div class="_leading">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="magnifying_glass"></span>
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-xl">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <div class="_leading">
      <div class="_icon">
        <span class="ncgr-icon" data-icon="magnifying_glass"></span>
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
Text

Textには_textクラスを付与します。

$
$
$
$
$ 
<div class="ncgr-text-field -size-xs">
  <div class="_control">
    <div class="_leading">
      <div class="_text">
        $
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-s">
  <div class="_control">
    <div class="_leading">
      <div class="_text">
        $
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-m">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <div class="_leading">
      <div class="_text">
        $
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-l">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <div class="_leading">
      <div class="_text">
        $
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>
<div class="ncgr-text-field -size-xl">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <div class="_leading">
      <div class="_text">
        $
      </div>
    </div>
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
  </div>
</div>

Trailing

_inputの直後に_trailingをいれることができます。

Icon

Iconには_iconクラスを付与します。

<div class="ncgr-text-field -color-positive -size-xs">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-positive">
        <span class="ncgr-icon" data-icon="check"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-positive -size-s">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-positive">
        <span class="ncgr-icon" data-icon="check"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-positive -size-m">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-positive">
        <span class="ncgr-icon" data-icon="check"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-positive -size-l">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-positive">
        <span class="ncgr-icon" data-icon="check"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-positive -size-xl">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-positive">
        <span class="ncgr-icon" data-icon="check"></span>
      </div>
    </div>
  </div>
</div>

<div class="ncgr-text-field -color-negative -size-xs">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-negative">
        <span class="ncgr-icon" data-icon="exclamation_on_triangle"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-negative -size-s">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-negative">
        <span class="ncgr-icon" data-icon="exclamation_on_triangle"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-negative -size-m">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-negative">
        <span class="ncgr-icon" data-icon="exclamation_on_triangle"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-negative -size-l">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-negative">
        <span class="ncgr-icon" data-icon="exclamation_on_triangle"></span>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -color-negative -size-xl">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_icon -color-negative">
        <span class="ncgr-icon" data-icon="exclamation_on_triangle"></span>
      </div>
    </div>
  </div>
</div>
Text

Textには_textクラスを付与します。

.com
.com
.com
.com
.com 
<div class="ncgr-text-field -size-xs">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_text">
        .com
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-s">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_text">
        .com
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-m">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_text">
        .com
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-l">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_text">
        .com
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-xl">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_text">
        .com
      </div>
    </div>
  </div>
</div>
Button

Buttonには_buttonクラスを付与します。

<div class="ncgr-text-field -size-s">
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_button">
        <button aria-label="Delete" class="ncgr-button -appearance-transparent -shape-circle -size-xs">
          <div class="_leading">
            <span class="ncgr-icon _icon" data-icon="cross_on_circle"></span>
          </div>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-m">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_button">
        <button aria-label="Delete" class="ncgr-button -appearance-transparent -shape-circle -size-s">
          <div class="_leading">
            <span class="ncgr-icon _icon" data-icon="cross_on_circle"></span>
          </div>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-l">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_button">
        <button aria-label="Delete" class="ncgr-button -appearance-transparent -shape-circle -size-m">
          <div class="_leading">
            <span class="ncgr-icon _icon" data-icon="cross_on_circle"></span>
          </div>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="ncgr-text-field -size-xl">
  <label class="_label" for="name">名前</label>
  <div class="_control">
    <input class="_input" type="text" name="name" placeholder="スリスリ君">
    <div class="_trailing">
      <div class="_button">
        <button aria-label="Delete" class="ncgr-button -appearance-transparent -shape-circle -size-l">
          <div class="_leading">
            <span class="ncgr-icon _icon" data-icon="cross_on_circle"></span>
          </div>
        </button>
      </div>
    </div>
  </div>
</div>

Text Link

テキストリンクをマークアップするときに使います。

テキストリンク 青いテキストリンク 白いテキストリンク 下線のついたテキストリンク 
<a class="ncgr-text-link" href="#">
  テキストリンク
</a>
<a class="ncgr-text-link ncgr-text-link--primary" href="#">
  青いテキストリンク
</a>
<a class="ncgr-text-link ncgr-text-link--white" href="#">
  白いテキストリンク
</a>
<a class="ncgr-text-link ncgr-text-link--underline" href="#">
  下線のついたテキストリンク
</a>

Textfield (Deprecated)

テキストフィールドのラベルはモバイルにおける省スペース化のため、テキストフィールドの枠上部に重なる形で配置します。 Material Designではラベルがプレースホルダーの位置から上部にアニメーションしながら移動しますが、ラベルとプレースホルダーの意味付けが曖昧になるため、アニメーションさせません。 SUZURIではあらゆるプラットフォームで同様の体験を提供するため、Web、iOS、Androidすべてのテキストフィールドは基本的にこのコンポーネントを使用します。

textfield同士の間隔は基本的に.ncgr-mar-b-16のutilityで調整し、イレギュラーな場合のみ他のサイズのmarginのutilityで調整します。

また、何を入力するかわかりやすいよう、記入例を例）〇〇の形でplaceholderに記入します。

また、textareaの高さは指定せず、rowsで指定します。基本的にはrows="6"で指定します。

<div class="ncgr-textfield ncgr-mar-b-16">
  <label class="ncgr-textfield__label" for="name">名前</label>
  <input class="ncgr-textfield__input" type="text" name="name" placeholder="例）スリスリ君">
</div>
<div class="ncgr-textfield ncgr-mar-b-16">
  <label class="ncgr-textfield__label" for="name">自己紹介</label>
  <textarea class="ncgr-textfield__input" name="name" rows="6" placeholder="例）忍ぶれど 色に出でにけり SUZURIです。"></textarea>
</div>

単体で使う小さなテキストフィールドを表示する場合は以下のようにマークアップします。

<div class="ncgr-textfield">
  <input class="ncgr-textfield__input ncgr-textfield__input--small" type="text" name="name" placeholder="オモイデの名前">
</div>

error・successの場合は以下のようにマークアップします。

error

<div class="ncgr-textfield ncgr-mar-b-16">
  <label class="ncgr-textfield__label" for="name">名前</label>
  <input class="ncgr-textfield__input invalid" type="text" name="name" placeholder="例）スリスリ君">
</div>

success

<div class="ncgr-textfield ncgr-mar-b-16">
  <label class="ncgr-textfield__label" for="name">名前</label>
  <input class="ncgr-textfield__input valid" type="text" name="name" placeholder="例）スリスリ君">
</div>

Tooltip

フォームの入力に誤りがある場合などに使用します。

<div style="position: relative;">
  <div class="ncgr-text-field -color-negative">
    <label class="_label" for="name">名前</label>
    <div class="_control">
      <input class="_input" type="text" name="name" placeholder="スリスリ君">
      <div class="_trailing">
        <span class="ncgr-icon _icon -color-negative" data-icon="exclamation_on_triangle"></span>
      </div>
    </div>
  </div>
  <div class="ncgr-tooltip -top -active" role="tooltip">
    名前は8文字以上で入力してください
  </div>
</div>

Uploader

画像をアップロードするために使用します。

  • .jpg .pngの形式ですか？
  • サイズは15MB以下ですか？
  • 権利侵害していませんか？
<div class="ncgr-uploader">
  <div class="ncgr-uploader__inner">
    <div class="ncgr-uploader__icon">
      <i class="fas fa-image"></i>
    </div>
    <ul class="ncgr-mar-b-8 ncgr-typography-small ncgr-typography-secondary-label">
      <li>.jpg .pngの形式ですか？</li>
      <li>サイズは15MB以下ですか？</li>
      <li>権利侵害していませんか？</li>
    </ul>
    <button class="ncgr-button -color-interactive">
      <div class="_leading">
        <span class="ncgr-icon" data-icon="upload"></span>
      </div>
      <div class="_body">
        画像をアップロード
      </div>
    </button>
  </div>
</div>

メニュー