Styleguide

Section Component 

<section class="section-wrapper " data-section-padding="">
    <div class="container">
        lorem ipsum
    </div>
</section>
 
<section class="section-wrapper {{ section_class }}" data-section-padding="{{ section_padding }}">
    <div class="container">
        {% if sidebar_content %}
            <div class="row">
                <div class="col-lg-8">
                    {{ content }}
                </div>
                <div class="col-lg-4">
                    <div class="sidebar">
                        {{ sidebar_content }}
                    </div>
                </div>
            </div>
        {% endif %}
        {% if not sidebar_content %}
            {{ content }}
        {% endif %}
    </div>
</section>
 
{
  "section_class": "",
  "section_padding": "",
  "content": "lorem ipsum",
  "sidebar_content": ""
}
  • Content: 
    import $ from "jquery";

$('.video-preview').click(function() {
    $(this).parent().find('.video-overlay').addClass('is-open');

});
$('.video-dimmer').click(function() {
    $(this).parent().removeClass('is-open');
    $(this).parent().find('.youtube-iframe').attr('src', $(this).parent().find('.youtube-iframe').attr('src'));
});
$('.close-video-btn').click(function() {
    $(this).parent().removeClass('is-open');
    $(this).parent().find('.youtube-iframe').attr('src', $(this).parent().find('.youtube-iframe').attr('src'));
});
  • URL: /components/raw/section/section.js
  • Filesystem Path: components/02-components/section/section.js
  • Size: 534 Bytes
  • Content: 
    $section-padding-small: 2rem;
$section-padding-medium: 4rem;
$section-padding-large: 6rem;
$section_multipier: 1.618;

.section-wrapper {
	padding-top: 6rem;
	padding-bottom: 6rem;
	overflow: hidden;

	&[data-section-padding="none"] {
		padding-top: 0;
		padding-bottom: 0;
	}

	&[data-section-padding="small"] {
		padding-top: $section-padding-small;
		padding-bottom: $section-padding-small;

		@include media-breakpoint-up(md) {
			padding-top: $section-padding-small * $section_multipier;
			padding-bottom: $section-padding-small * $section_multipier;
		}
	}
	&[data-section-padding="medium"] {
		padding-top: $section-padding-medium;
		padding-bottom: $section-padding-medium;

		@include media-breakpoint-up(md) {
			padding-top: $section-padding-medium * $section_multipier;
			padding-bottom: $section-padding-medium * $section_multipier;
		}
	}
	&[data-section-padding="large"] {
		padding-top: $section-padding-large;
		padding-bottom: $section-padding-large;

		@include media-breakpoint-up(md) {
			padding-top: $section-padding-large * $section_multipier;
			padding-bottom: $section-padding-large * $section_multipier;
		}
	}
}

.section-no-padding-top {
	padding-top: 0 !important;
}

.section-light-grey {
	background: $color-light-grey;
}

.section-pagehead {
	padding-bottom: 0 !important;

	+ .section-wrapper {
		//padding-top: 0;
	}
}

.section-with-sidebar {
}
  • URL: /components/raw/section/section.scss
  • Filesystem Path: components/02-components/section/section.scss
  • Size: 1.4 KB

There are no notes for this item.