ui:container

汎用的なContainerコンポーネントです。

• レイアウトの外側に配置されることを想定しており、予め左右余白が付与されています。

Examples

Default

Source Code

<div class="ui:container">
  <div class="bg-black-a1 text-center">1024px</div>
</div>

Sizes

Source Code

<div class="grid gap-4">
  <div class="ui:container" data-size="sm">
    <div class="bg-black-a1 text-center">640px</div>
  </div>
  <div class="ui:container" data-size="md">
    <div class="bg-black-a1 text-center">768px</div>
  </div>
  <div class="ui:container" data-size="lg">
    <div class="bg-black-a1 text-center">1024px</div>
  </div>
  <div class="ui:container" data-size="xl">
    <div class="bg-black-a1 text-center">1280px</div>
  </div>
  <div class="ui:container" data-size="2xl">
    <div class="bg-black-a1 text-center">1536px</div>
  </div>
  <div class="ui:container" data-size="full">
    <div class="bg-black-a1 text-center">100%</div>
  </div>
</div>

Variants

属性	要素	値	効果
data-size	root	sm, md, lg, xl, 2xl, full