Container

Containers are used to wrap your content to encourage consistency and provides default padding to your content:

Usage

home.js

import React from 'react'
import { Container, Heading } from '@therise3107/axis'

const home = ({ children }) => (
    <Container>
        {children}
    </Container>
)

Containers can be used once at the top level of your application

Containers are fully responsive, they will auto-adjust based on the screen size. Below is the breakpoints table used for the maximum width of Containers:

Screen-Size	Width
xs < 576px	100%
sm ≥ 576px	540px
md ≥ 768px	720px
lg ≥ 992px	960px
xl ≥ 1200px	1140px

Containers can also be fluid just use them as <Container fluid>

API Reference

For screen size (sm) ≥ 576px Container has horizontal padding of {theme.variables.gutter}rem

For screen size (xs) < 576px Container has horizontal padding of 0.5 * {theme.variables.gutter}rem

You can change the gutter in your theme file just note the same gutter is used Button, Container and Row