Container

Documentation for the <Container /> component. Learn about the available props and how to use it.

Installation

To get started, install @exponentialeducation/betomic via yarn:

# Yarn


yarn add @exponentialeducation/betomic

Basic Example

A Container are used to pad the content inside of them.

{/* ... */}


import { Container } from '@exponentialeducation/betomic';


function IndexPage() {
  return (
    <main>
      {/* ... */}


      <Container>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
      </Container>


      {/* ... */}
    </main>
  )
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel finibus nisl. Duis a nunc finibus, faucibus sem ac, accumsan quam. Nullam quis finibus felis. Vivamus porttitor bibendum leo, nec ornare augue laoreet maximus. Nulla nec lacus lobortis, tempor augue eget, auctor tortor. Morbi nibh dolor, pharetra convallis justo et, porta tristique sapien. Aliquam luctus turpis ut ex ultricies, non mattis diam egestas. In maximus libero a mauris porttitor vestibulum. Phasellus condimentum urna quis metus fermentum facilisis. Vestibulum lacinia enim tellus, vitae porttitor risus accumsan a.

Pellentesque fringilla elit erat, sit amet fermentum magna sollicitudin nec. Proin vel eros facilisis, tristique lectus id, dignissim nibh. Vivamus lacus nisi, rhoncus eget tortor ac, dictum ultricies justo. Mauris tincidunt urna ac libero gravida ultrices. Duis aliquam euismod eleifend. Mauris justo lacus, pretium vitae imperdiet in, vulputate vel lacus. Proin hendrerit quis nisl et condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tempor mattis sem et sodales. Ut vitae purus ut nisi convallis lacinia. Nullam in sagittis eros. Fusce a risus sem.

Fluid

Five sizes are available.

{/* ... */}


import { Container } from '@exponentialeducation/betomic';


function IndexPage() {
  return (
    <main>
      {/* ... */}


      <Container fluid>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
      </Container>


      {/* ... */}
    </main>
  )
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel finibus nisl. Duis a nunc finibus, faucibus sem ac, accumsan quam. Nullam quis finibus felis. Vivamus porttitor bibendum leo, nec ornare augue laoreet maximus. Nulla nec lacus lobortis, tempor augue eget, auctor tortor. Morbi nibh dolor, pharetra convallis justo et, porta tristique sapien. Aliquam luctus turpis ut ex ultricies, non mattis diam egestas. In maximus libero a mauris porttitor vestibulum. Phasellus condimentum urna quis metus fermentum facilisis. Vestibulum lacinia enim tellus, vitae porttitor risus accumsan a.

Pellentesque fringilla elit erat, sit amet fermentum magna sollicitudin nec. Proin vel eros facilisis, tristique lectus id, dignissim nibh. Vivamus lacus nisi, rhoncus eget tortor ac, dictum ultricies justo. Mauris tincidunt urna ac libero gravida ultrices. Duis aliquam euismod eleifend. Mauris justo lacus, pretium vitae imperdiet in, vulputate vel lacus. Proin hendrerit quis nisl et condimentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur tempor mattis sem et sodales. Ut vitae purus ut nisi convallis lacinia. Nullam in sagittis eros. Fusce a risus sem.

Props

prop

description

children?

node Content will be render

fluid?

boolean = false Classes to provides a full width container