
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/footer/index.mdx'

## Default Class Table
  
<CssTable name="footer" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.footer {
  @apply grid w-full grid-flow-row place-items-start;
}
.footer > * {
  @apply grid place-items-start;
}
.footer-center {
  @apply place-items-center text-center;
}
.footer-center > * {
  @apply place-items-center;
}

@media (min-width: 48rem) {
  .footer {
    grid-auto-flow: column;
  }
  .footer-center {
    grid-auto-flow: row dense;
  }
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.footer {
  @apply gap-x-4 gap-y-10 text-sm;
}
.footer > * {
  @apply gap-2;
}
.footer-title {
  @apply mb-2 font-bold uppercase opacity-60;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css

```

</div>
</div>



