GroupCollect 1.3.142

Center

Renders a centred layout.

Read more Read less

The default spacing is md.

Examples

<.center space="base">
  <.box padding="xs" border="sm">
    <.p>
      Centered Box with Paragraph.
      Elements on this page will have the `.gc-gap-base` class.
    </.p>
  </.box>
</.center>

<.center space="lg">
  <.box padding="xs" border="sm">
    <.p>
      Centered Box with Paragraph.
      Elements on this page will have the `.gc-gap-lg` class.
    </.p>
  </.box>
</.center>
Space: none Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="none">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 3xs Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="3xs">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 2xs Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="2xs">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: xs Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="xs">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: sm Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="sm">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: base Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="base">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: lg Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="lg">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 2xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="2xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 3xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="3xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 4xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="4xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 5xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="5xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 6xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="6xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 7xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="7xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 8xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="8xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 9xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="9xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 10xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="10xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 11xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="11xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 12xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="12xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 13xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="13xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 14xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="14xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>
Space: 15xl Open in playground

Centered Header

Centered Box with Paragraph

Standalone Paragraph within the Center layout 

<.center space="15xl">
  <.h1>Centered Header</.h1>
  <.box padding="xs" border="sm">
  <.p>Centered Box with Paragraph</.p>
  </.box>
  <.p>Standalone Paragraph within the Center layout</.p>
</.center>