Copy environment

Section

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section  ">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  }
}

White

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section  " data-theme="white">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "theme": "white"
}

Bright

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section  " data-theme="bright">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "theme": "bright"
}

Gray

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section  " data-theme="gray">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "theme": "gray"
}

Dark

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section  " data-theme="dark">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "theme": "dark"
}

Light Green

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section  " data-theme="light-green">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "theme": "light-green"
}

Primary

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section  " data-theme="primary">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "theme": "primary"
}

Secondary

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section  " data-theme="secondary">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "theme": "secondary"
}

Full

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section section--full ">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "modifier": "section--full"
}

Page Intro

Use as first section on a page.

<section class="section section--page-intro ">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "modifier": "section--page-intro"
}

Stretch

Use with full if you want the children to handle the alignment by themselves.

<section class="section section--stretch ">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "modifier": "section--stretch"
}

No Bottom Padding

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section section--no-bottom-padding ">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "modifier": "section--no-bottom-padding"
}

No Padding

Defines section background color and text colors within the section. E.g. dark background has light text.

<section class="section section--no-padding ">
    <div class="section__inner">
        <div class="section__content">
            hello world
        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "content": "hello world"
  },
  "modifier": "section--no-padding"
}