Bolt Design System

Padding

Padding top and bottom can be individually adjusted based on the use case.

Important Notes:

Reference the schema for all options. Layout schema

Demo

Medium padding-top and xlarge padding-bottom

Layout item

Twig

{% include '@bolt-layouts-layout/layout.twig' with {
  padding_top: 'small',
  padding_bottom: 'xlarge',
  ...
} only %}

HTML

<bolt-layout padding-top="small" padding-bottom="xlarge">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>