Styleguide

Pagehead 

<div class="page-head">
    <h1 class="page-head-title">Pagehead Title</h1>
    <p class="page-head-lead">Master Lead if required Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <div class="page-head-content">Page Lead / content with buttons implicit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
</div>
 
<div class="page-head">
  <h1 class="page-head-title">{{ title|raw }}</h1>
  {% if lead %}
    <p class="page-head-lead">{{ lead }}</p>
  {% endif %}
  {% if content %}
    <div class="page-head-content">{{ content }}</div>
  {% endif %}
</div>
 
{
  "title": "Pagehead Title",
  "lead": "Master Lead if required Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
  "content": "Page Lead / content with buttons implicit Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
}
  • Content: 
    import $ from "jquery";

$('.video-preview').click(function() {
    $(this).parent().find('.video-overlay').toggleClass('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'));
});
  • URL: /components/raw/pagehead/pagehead.js
  • Filesystem Path: components/02-components/pagehead/pagehead.js
  • Size: 334 Bytes
  • Content: 
    .page-head {
	> *:last-child {
		margin-bottom: 3rem !important;
	}

	.intro-text {
		margin-bottom: 3rem;
	}

	.page-head-title {
		@extend .page-title;
		margin-bottom: 2rem;
		color: $secondary;

		.text-light {
			font-weight: 300;
			color: inherit !important;
		}
		.text-orange {
			color: $primary !important;
		}
	}
	.page-head-lead {
		@extend .page-lead;
		margin-bottom: 3rem;
		color: $secondary;
		&:empty {
			display: none;
		}
	}
	.page-head-content {
		@extend .text-medium;
		color: $secondary;

		.btn {
			height: 3.5rem;
			margin-right: 1.5rem;
		}
	}
}
  • URL: /components/raw/pagehead/pagehead.scss
  • Filesystem Path: components/02-components/pagehead/pagehead.scss
  • Size: 577 Bytes

There are no notes for this item.