Playground

Try lk-* layout wrappers around native semantic HTML. The preview uses the same CSS file shipped by the package.

LayoutKit markup

Live preview

No results

Try changing the filters.

Equivalent layout CSS, by hand

<!-- HTML -->
<div class="center">
  <h2>Hello World</h2>
  <p>Centered perfectly</p>
</div>

/* CSS */
/* <lk-center full-height> */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}