Components / Box

Box

# Introduction

The box component is a simple container that can be used to group elements together.

# Solo

Box can be used on its own to create a simple container.

  
<zinq:box> 
    <div class="flex space-x-2">
        <zinq:button primary>Save changes</zinq:button>
        <zinq:button>Cancel</zinq:button>
    </div>
</zinq:box>

# Grid

Box can be used to create a grid layout.

1
2
3
  
<div class="grid grid-cols-3 gap-4">
    <zinq:box>1</zinq:box>
    <zinq:box>2</zinq:box>
    <zinq:box>3</zinq:box>
</div>

# Customizing

You can customize the box component by adding classes or other attributes to the zinq:box element.

Solo box
  
<zinq:box class="bg-sky-100 dark:bg-sky-900">Solo box</zinq:box>