Shopstory
  • Overview
  • Getting started
    • Installation
    • Connecting CMS
      • Contentful
      • Sanity
    • Displaying content
    • Content modeling with Shopstory
  • Devices and breakpoints
  • Design tokens
    • Colors
    • Spacings
    • Fonts
    • Page containers
      • Margins
      • Max width
    • Aspect ratios
    • Missing tokens
  • Custom code
    • Components
    • Buttons
    • Actions
    • Links
  • Resources
  • Image
  • Analytics
  • Schema reference
  • CMS Guides
    • Contentful
    • Sanity
Powered by GitBook
On this page
  1. Design tokens
  2. Page containers

Margins

Page container margins are standard space tokens but need to be prefixed with a containerMargin. string:

export const shopstoryConfig = {
  //...
  space: [
    {
      id: 'containerMargin.default',
      value: "5vw"
    },
    {
      id: 'containerMargin.another',
      value: {
        "@xs": 16,
        "@md": 32,
        "@lg": 64
      }
    },
  ],
}

Built-in container margin

The default container margin is 5vw and is stored in containerMargin.default space. You should override this value with projects default container margin.

PreviousPage containersNextMax width

Last updated 2 years ago