unitone ブロック

両端ブロック

子ブロックを両端に配置したいときに使用するブロックです。

さらに詳しく

センターブロック

(テキストではなく)ブロック自体を中央揃えしたいときに使用するブロックです。

さらに詳しく

クラスターブロック

子ブロックを水平方向に等間隔で並べたいときに使用するブロックです。

さらに詳しく

クラスター(区切りあり)ブロック

子ブロックを水平方向に等間隔で並べたいときに使用するブロックです。通常のクラスターブロックと違い、区切り線を表示することができます。

さらに詳しく

コンテナーブロック

コンテンツを一定の幅に収めたいときに使用します。一定の幅に収めたあと、このブロックを水平方向のどの位置に配置するかも指定できます。

さらに詳しく

カバーブロック

一定の高さの中で子ブロックを垂直方向にどのように配置するかを指定できるブロックです。主に画面の広い範囲をカバーするようにデザインされたブロックです(デフォルトでは最小の高さが画面と同じ高さになっています)。

さらに詳しく

デコレーターブロック

装飾用のブロックです。色、パディング、位置などを設定できます。

さらに詳しく

フレームブロック

画像・動画を一定の画角(アスペクト比)で表示したいときに使用するブロックです。

さらに詳しく

ガターブロック

コンテンツを上下パディングで区切りたいときに使用するブロックです。

さらに詳しく

レイヤーブロック

複数のブロックを重ねたいときに使用するブロックです。

さらに詳しく

リールブロック

子ブロックを折り返さずに水平スクロールで表示したいときに使用するブロックです。

さらに詳しく

レスポンシブグリッドブロック

子ブロックをグリッド状に並べたいときに使用するブロックです。

さらに詳しく

レスポンシブグリッド(区切りあり)ブロック

子ブロックをグリッド状に並べたいときに使用するブロックです。通常のレスポンシブグリッドブロックと違い、区切り線を表示することができます。

さらに詳しく

スタックブロック

子ブロックを等間隔で垂直方向に並べたいときに使用するブロックです。

さらに詳しく

スタック(区切りあり)ブロック

子ブロックを等間隔で垂直方向に並べたいときに使用するブロックです。通常のスタックブロックと違い、区切り線を表示することができます。

さらに詳しく

スイッチャーブロック

幅が閾値より大きい場合は横並び、小さい場合は1列に並ぶブロックです。

さらに詳しく

テキストブロック

テキストを読みやすい余白感と文字サイズで表示するためのブロックです。

さらに詳しく

縦書きブロック

縦書きの文字を配置したいときに使用するブロックです。

さらに詳しく

サイドバーブロック

サイドバー付きのコンポーネントを組み立てたいときに使用するブロックです。

さらに詳しく

アコーディオンブロック

トグルボタンをクリックすると展開するアコーディオンを表示するブロックです。

さらに詳しく

パンくずリストブロック

パンくずリストを表示するためのブロックです。

さらに詳しく

子ページの一覧ブロック

子ページの一覧を表示するためのブロックです。

さらに詳しく

メガメニューブロック

ナビゲーションブロックにメガメニューを追加することができるブロックです。ナビゲーションブロックの子ブロックとして配置してください。

さらに詳しく

パターンを挿入(ベータ版)ブロック

グローバルインサーターを開かずにパターンを挿入できるようにするために用意されたブロックです。

さらに詳しく

セクションブロック

ページ内のコンテンツを整理・区分するために、コンテンツの1つのまとまりをつくりたいときに使用するブロックです。

さらに詳しく

スライダーブロック

Swiper を使ったスライダーをつくることができるブロックです。

さらに詳しく

フレックスブロック

CSS の display: flex を実現するためのシンプルなブロックです。

さらに詳しく

フレックス(区切りあり)ブロック

CSS の display: flex を実現するためのシンプルなブロックです。通常のフレックスブロックと違い、区切り線を表示することができます。

さらに詳しく

グリッドブロック

CSS の display: grid を実現するためのシンプルなブロックです。

さらに詳しく

グリッド(区切りあり)ブロック

CSS の display: grid を実現するためのシンプルなブロックです。通常のクラスターブロックと違い、区切り線を表示することができます。

さらに詳しく
目次

マニュアル