122 hero #259
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| @charset "UTF-8"; | ||
|
|
||
| // Local variable not for changing. | ||
| $_su-hero-height: ( | ||
| 'xs': 208px, | ||
| 'sm': 208px, | ||
| 'md': 320px, | ||
| 'lg': 409px, | ||
| 'xl': 520px | ||
| ); | ||
|
|
||
| // | ||
| // Hero | ||
| // | ||
| // A hero block that can be either an image or a video with some overlay text. | ||
| // | ||
| // Experimental: The youtube player has not been finished. | ||
| // | ||
| // .su-hero--youtube - A youtube video in the background. | ||
| // | ||
| // Markup: ../templates/components/hero/hero.twig | ||
| // | ||
| // Style guide: Components.Hero | ||
| // | ||
| .su-hero { | ||
| position: relative; | ||
| @media #{$breakpoint-md} { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| min-height: map-get($_su-hero-height, 'md'); | ||
| } | ||
| @media #{$breakpoint-lg} { | ||
| min-height: map-get($_su-hero-height, 'lg'); | ||
| } | ||
| @media #{$breakpoint-xl} { | ||
| min-height: map-get($_su-hero-height, 'xl'); | ||
| } | ||
| } | ||
|
|
||
| // The media element. | ||
| // Big tall wide and in a little bid of a shade. | ||
| .su-hero__media { | ||
| width: 100%; | ||
| height: 100%; | ||
| background: $color-black; | ||
|
|
||
| @media #{$breakpoint-md} { | ||
| min-height: map-get($_su-hero-height, 'md'); | ||
| position: absolute; | ||
| } | ||
| @media #{$breakpoint-lg} { | ||
| min-height: map-get($_su-hero-height, 'lg'); | ||
| position: absolute; | ||
| } | ||
| @media #{$breakpoint-xl} { | ||
| min-height: map-get($_su-hero-height, 'xl'); | ||
| position: absolute; | ||
| } | ||
|
|
||
| img, | ||
| picture{ | ||
| object-fit: cover; | ||
| object-position: 50% 50%; | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // The content | ||
| .su-hero__card { | ||
| position: relative; | ||
| z-index: 10; | ||
| background: $color-white; | ||
|
|
||
| @media #{$breakpoint-md} { | ||
| @include margin(45px null); | ||
| left: 45px; | ||
| max-width: 400px; | ||
| } | ||
| @media #{$breakpoint-lg} { | ||
| max-width: 450px; | ||
| } | ||
| @media #{$breakpoint-xl} { | ||
| @include margin(96px null 0 null); | ||
| max-width: 450px; | ||
| top: auto; | ||
| bottom: 48px; | ||
| left: 48px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| @charset "UTF-8"; | ||
|
|
||
| // Local variable not for changing. | ||
| $_su-hero-height: ( | ||
| 'xs': 315px, | ||
| 'sm': 315px, | ||
| 'md': 640px, | ||
| 'lg': 640px, | ||
| 'xl': 728px | ||
| ); | ||
|
|
||
| .su-hero--youtube { | ||
|
There was a problem hiding this comment. Should there be a specific |
||
|
|
||
| @media #{$breakpoint-md} { | ||
| min-height: map-get($_su-hero-height, 'md'); | ||
| } | ||
|
|
||
| @media #{$breakpoint-lg} { | ||
| min-height: map-get($_su-hero-height, 'lg'); | ||
| } | ||
|
|
||
| @media #{$breakpoint-xl} { | ||
| min-height: map-get($_su-hero-height, 'xl'); | ||
| } | ||
|
|
||
| min-height: map-get($_su-hero-height, 'xs'); | ||
|
|
||
| .su-hero__media { | ||
| iframe { | ||
|
|
||
| @media #{$breakpoint-md} { | ||
| height: 100%; | ||
| } | ||
|
|
||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| @charset "UTF-8"; | ||
|
|
||
| // Roll up file. | ||
|
|
||
| @import | ||
| 'hero', | ||
| 'hero--youtube'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "attributes": "", | ||
| "modifier_class": "", | ||
| "hero_image": "<img src='/img/hero-banner.png' alt='Example Hero Image' />", | ||
| "hero_media": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/_Nq4Z5i7lcs\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", | ||
| "hero_super_headline": "This is a super headline", | ||
| "hero_headline": "Headline goes here", | ||
| "hero_body": "<p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>", | ||
| "hero_cta_link": "https://stanford.edu", | ||
| "hero_cta_attributes": "", | ||
| "hero_cta_label": "CTA Link Label", | ||
| "hero_button_link": "https://stanford.edu", | ||
| "hero_button_label": "Button Label" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| {# | ||
| /** | ||
| * @file | ||
| * Hero Component | ||
| * | ||
| * A big graphic for use as a focal point or a large video. | ||
| * | ||
| * Available variants: | ||
| * - .su-hero--youtube: youtube iframe embed option | ||
| * | ||
| * Available variables: | ||
| * - attributes: For additional HTML attributes not already provided. | ||
| * - modifier_class: Additional css classes to change look and behaviour. | ||
| * - hero_media: iframe or HTML5 video players | ||
| * - hero_image: A full HTML entity for an image. Can be img or picture. | ||
| * - hero_super_headline: Text heading | ||
| * - hero_headline: Text heading | ||
| * - hero_body: An open variable for anything. Generally this would be for | ||
| * WYSIWYG editor contents. | ||
| * - hero_cta_link: The href value for the cta field link | ||
| * - hero_cta_attributes: Any html attributes on the cta link that need to be | ||
| * added. For example: _target. | ||
| * - hero_cta_label: The clickable text for the CTA link | ||
| * - hero_button_link: The href property of the button component. | ||
| * - hero_button_label: The text label of the button component. | ||
| */ | ||
| #} | ||
| <div{{ attributes }} class="su-hero {{ modifier_class }}"> | ||
|
|
||
| {# Hero Image or Video #} | ||
| <div class="su-hero__media"> | ||
| {% if 'su-hero--youtube' in modifier_class %} | ||
|
There was a problem hiding this comment. This is my trick to get the KSS styleguide to show both img and youtube video. KSS does not support multiple data sets for the modifier_classes. Maybe one day it will. |
||
| {# Support for: iframe #} | ||
| {{ hero_media }} | ||
| {% else %} | ||
| {# Support for: img or picture #} | ||
| {{ hero_image}} | ||
| {% endif %} | ||
| </div> | ||
|
|
||
| {# We reuse the card component here. #} | ||
| {% include "@decanter/components/card/card.twig" with | ||
| { | ||
| "modifier_class": "su-hero__card", | ||
| "card_super_headline": hero_super_headline, | ||
| "card_headline": hero_headline, | ||
| "card_body": hero_body, | ||
| "card_cta_link": hero_cta_link, | ||
| "card_cta_attributes": hero_cta_attributes, | ||
| "card_cta_label": hero_cta_label, | ||
| "card_button_link": hero_button_link, | ||
| "card_button_label": hero_button_label, | ||
| } | ||
| only | ||
| %} | ||
|
|
||
| </div> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if the
embed-containermixin would be useful here. I can see also how it might not be if the ratio for a video option should match that of the image. The mixin keeps a 16:9 ratio while also applying 100% height and width.