<section id="" class="section _gray " style=" ">
</section>
<section
    id="{{id}}"
    class="{{#unless unstyled}}section{{/unless}} {{modifier}} {{#if lazyload}}b-lazy{{/if}}"
    {{#if lazyload}}
        {{#if background}}data-src="{{background}}"{{/if}}
        style="{{style}}"
    {{else}}
        style="{{#if background}}background-image: url({{background}});{{/if}} {{style}}"
    {{/if}}
    {{#if expanded}}expanded{{/if}}
>
    {{> @children}}
</section>
{
  "background": null,
  "expanded": null,
  "id": null,
  "lazyload": null,
  "modifier": "_gray",
  "style": null,
  "unstyled": null
}
  • Content:
    @import "../../axioms/Section";
    @import "../../axioms/Angled";
    @import "./SectionBase";
    .section {
        @include section;
        &._bordered {
            border-top: 1px solid get-color(neutral, 200);
        }
        &._dark {
            @include section-color(theme-color(background,dark), theme-color(text,inverse));
        }
        &._gray {
            @include section-color(theme-color(background, light));
        }
        &._tall {
            @include section-padding(Space(800), Space(800), Space(600), Space(600));
            @include hero-alignment("left");
        }
        &._teal {
            @include section-color(get-color(aqua, 600), theme-color(text, inverse));
        }
        &._5050image {
            @include section-style("5050image");
        }
    }
    .Section--gradient {
        background: linear-gradient(300deg, get-color(neutral, 200), get-color(neutral, 0));
        background-color: get-color(neutral, 100);
    }
    @media #{$mobile-media} {
        .section {
            &._hide-bg-mobile {
                background-image: none !important;
            }
            ._bottomimage {
                padding-bottom: 0;
            }
            // Add class to body (in controller) to center all the things on mobile
            ._mobilecentered & * {
                text-align: center;
            }
            &._tall:not(._dark) {
                background: theme-color(background, light);
            }
        }
    }
    
  • URL: /components/raw/section/Section.scss
  • Filesystem Path: components/organisms/Section/Section.scss
  • Size: 1.3 KB
  • Content:
    @import "../../axioms/Section";
    @import "../../axioms/Angled";
    .section {
        @include section;
        &._small {
            @include section-padding(Space(500), Space(500));
        }
        &._centered {
            @include section-alignment("center");
        }
        &._multirow > .row + .row {
            margin-top: Space(500);
        }
    }
    @media #{$desktop-media} {
        .section {
            &._multirow > .row + .row {
                margin-top: Space(600);
            }
        }
    }
    
  • URL: /components/raw/section/SectionBase.scss
  • Filesystem Path: components/organisms/Section/SectionBase.scss
  • Size: 449 Bytes

There are no notes for this item.