<section id="" class="section _bright " 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": "_bright",
"style": null,
"unstyled": null
}
@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);
}
}
}
@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);
}
}
}
There are no notes for this item.