+ $('.node.event .section-editorial-content .su-event-type a').contents().unwrap().wrap('
'); + + // Replace tag for news node news topics taxonomy with$('.news.node .layout--section-news-header .su-news-topics a').contents().unwrap().wrap('
'); + } }; diff --git a/src/scss/components/banner/_banner--fullpill.scss b/src/scss/components/banner/_banner--fullpill.scss new file mode 100644 index 0000000..848a3b6 --- /dev/null +++ b/src/scss/components/banner/_banner--fullpill.scss @@ -0,0 +1,155 @@ +@charset "UTF-8"; + +$banner-circle--image-width: 200px; +$banner-circle--sm-image-width: 150px; + + +.chemh-wrapper--banner-fullpill { + margin: 0 auto; + + @include grid-media-min('sm') { + max-width: calc(100vw - 200px); + } + + .su-hero { + background: $su-color-black url("../../assets/svg/fullpill-bg.svg") no-repeat 100% / 200%; + border-radius: 300px; + color: $su-color-white; + flex-direction: row; + justify-content: flex-start; + align-items: center; + min-height: 400px; + + @include grid-media-max('md') { + background: $su-color-black url("../../assets/svg/fullpill-bg.svg") no-repeat 100% / 205%; + flex-direction: column; + background-size: cover; + + @include modular-spacing('padding', 3); + } + + @include grid-media-max('lg') { + flex-direction: column; + } + + @include modular-spacing('padding-top', 3); + @include modular-spacing('padding-bottom', 3); + + .su-hero__media { + background: transparent; + margin-left: 5%; + min-height: unset; + position: unset; + height: unset; + width: 275px; + + @include grid-media-max('sm') { + aspect-ratio: unset; + margin: 0 auto; + } + + img { // Image display has been set to media image style - Medium (220) + @include modular-spacing('margin-bottom', -2); + + border-radius: 50%; + width: $banner-circle--image-width; + height: $banner-circle--image-width; + margin-left: auto; + margin-right: auto; + object-fit: cover; + padding: 0; + + @include grid-media-min('lg') { + margin-left: unset; + } + + @include grid-media-max('sm') { + width: $banner-circle--sm-image-width; + height: $banner-circle--sm-image-width; + } + } + } + + .su-card { + &.su-hero__card { + background: transparent; + border: none; + bottom: unset; + box-shadow: none; + left: unset; + margin-top: unset; + margin-bottom: unset; + max-width: 980px; + top: unset; + + & > .image { + @include grid-media-min('sm') { + max-width: $banner-circle--image-width; + min-width: $banner-circle--image-width; + + margin-left: 50px; + + img { + border-radius: 50%; + } + } + } + + .su-card__contents { + + h2 { + @include responsive-spacing('margin-bottom', -1); + @include chemh-heading--badge; + @include type-a; + + color: $su-color-white; + font-family: $su-font-sans; + } + + .su-card__link, + .su-card__button { + @include responsive-spacing('margin-top', 3); + + @include grid-media-max('md') { + text-align: center; + } + } + } + } + } + } + + // Link colors. + div { + .su-button, + .su-card__button { + a { + background-color: $su-color-black; + color: $su-color-white; + } + } + } + + .su-button:not(.su-link--external):after, + .su-button:not(.su-link--external):after { + background: url(../../assets/svg/icon_east_white.svg) no-repeat 0 0; + } +} + +// when on a page with a sidebar nav, needs adjustments: +.jumpstart-ui--two-column.centered-container { + .flex-lg-9-of-12.main-region { + .su-hero { + // when on a sidebar-nav page, needs less bottom spacing + @include modular-spacing('padding-bottom', 5); + + .su-card__contents { + max-width: 90%; + + @include grid-media-min('lg') { + max-width: 80%; + } + } + } + } +} diff --git a/src/scss/components/banner/_banner--general.scss b/src/scss/components/banner/_banner--general.scss new file mode 100644 index 0000000..5ea4b2e --- /dev/null +++ b/src/scss/components/banner/_banner--general.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +// Link/buttons colors. +.su-page-banner { + + div { + .su-card__button { + .su-link.su-button { + background-color: $su-color-black; + color: $su-color-white; + } + } + } + + .su-button:not(.su-link--external):after, + .su-button:not(.su-link--external):after { + background: url(../../assets/svg/icon_east_white.svg) no-repeat 0 0; + } +} + diff --git a/src/scss/components/banner/_banner--halfpill-title.scss b/src/scss/components/banner/_banner--halfpill-title.scss new file mode 100644 index 0000000..ac688d0 --- /dev/null +++ b/src/scss/components/banner/_banner--halfpill-title.scss @@ -0,0 +1,193 @@ +@charset "UTF-8"; + +// Banner variants. +// Classes: +// .chemh-wrapper--banner-homepage +// .chemh-wrapper--banner-halfpill +// .chemh-wrapper--banner-wholepill +// .chemh-wrapper--banner-halfpill-title + +.su-page-banner { + background: #000 url(../../assets/png/header-sm-000--cropped.png) no-repeat 50%/cover; + + .chemh-wrapper--banner-halfpill-title { + @include grid-media-min('lg') { + max-width: 1800px; + margin: 0 auto; + } + + .su-hero__media { + // removes the dark grey bg on banner images. + background: $su-color-white; + + .image, + .media, + >article, + >div { + // image size contraint + max-width: 850px; + } + } + + .su-hero__card { + background: transparent; + border: 0; + box-shadow: none; + // max-width: 557px; + + .su-card__contents { + // h2 badge + @include chemh-heading--badge; + + color: $su-color-white; + padding: 0; + + @include grid-media-max('sm') { + padding: 3rem 0 0 0; + width: 400px; + } + + h1 { + @include type-a; + + color: $su-color-white; + line-height: 110%; + letter-spacing: -0.04em; + } + + .bullet { + padding-left: 0.6em; + margin-bottom: 0; + + &::before { + content: "\2022"; + display: inline-block; + display: inline-block; + color: $chemh-color-digital-blue; + padding-right: 0.5em; + font-size: 1.5em; + } + } + } + } + + // Card position - right side + .overlay-right { + + &.su-hero { + .su-hero__media { + background-color: transparent; + + img { + border-top-right-radius: 300px; + border-bottom-right-radius: 300px; + + @media (min-width: 2500px) { + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + } + } + } + + @include grid-media('xl') { + &.su-hero { + + .su-hero__media { + max-width: 60%; + } + + .su-hero__card { + max-width: 30%; + right: 5%; + } + } + } + + @include grid-media-max('lg') { + .su-hero__media { + max-width: 50%; + background-size: contain; + } + + .su-hero__card { + max-width: 40%; + } + } + + @include grid-media-max('md') { + .su-hero__media { + width: 50%; + } + + .su-hero__card { + width: 40%; + right: 5%; + } + } + + @include grid-media-max('sm') { + .su-hero__media { + padding-right: 30px; + max-width: unset; + width: 100%; + } + + .su-hero__card { + max-width: 100%; + padding: 3.0rem; + right: unset; + width: 100%; + } + } + } + } + + // Card position - left side + .overlay-left { + align-items: baseline; + display: grid; + grid-template-columns: repeat(2,1fr); + grid-template-areas: "card media"; + + @include grid-media-max('sm') { + display: block; + padding: 0 0 30px 30px; + + .su-hero__media { + padding-bottom: 10px; + } + } + + @include grid-media-max('md') { + grid-template-columns: 40% 1fr; + grid-template-areas: "card media"; + gap: 10%; + } + + &.su-hero { + + .su-hero__card { + grid-area: card; + } + + .su-hero__media { + background-color: transparent; + grid-area: media; + max-width: unset; + width: unset; + right: 0; + + img { + border-top-left-radius: 300px; + border-bottom-left-radius: 300px; + + @media (min-width: 2500px) { + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + } + } + } + } + } + } +} diff --git a/src/scss/components/banner/_halfpill.scss b/src/scss/components/banner/_banner--halfpill.scss similarity index 52% rename from src/scss/components/banner/_halfpill.scss rename to src/scss/components/banner/_banner--halfpill.scss index 28471fe..0c9cef6 100644 --- a/src/scss/components/banner/_halfpill.scss +++ b/src/scss/components/banner/_banner--halfpill.scss @@ -5,10 +5,11 @@ // .chemh-wrapper--banner-homepage // .chemh-wrapper--banner-halfpill // .chemh-wrapper--banner-wholepill +// .chemh-wrapper--banner-halfpill-title .chemh-wrapper--banner-halfpill { @include grid-media-min('lg') { - max-width: 1800px; + max-width: 2500px; margin: 0 auto; } @@ -29,14 +30,23 @@ background: transparent; border: 0; box-shadow: none; - // max-width: 557px; + max-width: unset; + margin-left: 0; .su-card__contents { - // h2 badge @include chemh-heading--badge; padding: 0; + @include grid-media-max('sm') { + padding: 3rem 0 0 0; + width: 400px; + } + + @include grid-media('lg') { + width: 400px; + } + h2 { @include type-a; @@ -63,62 +73,70 @@ // Card position - right side .overlay-right { - &.su-hero { + display: grid; + grid-template-columns: 75%, 25%; + grid-template-areas: "media card"; + column-gap: 100px; + + @include grid-media('lg') { + grid-template-columns: 60% 40%; + column-gap: 5%; + } + + @include grid-media('xl') { + grid-template-columns: 60% 40%; + } + + @include grid-media-min('2xl') { + grid-template-columns: 50% 50%; + } + + @media (min-width: 2500px) { .su-hero__media { img { - border-top-right-radius: 300px; - border-bottom-right-radius: 300px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; } } + } - @include grid-media('xl') { - &.su-hero { - - .su-hero__media { - max-width: 60%; - } + @include grid-media-max('sm') { + display: block; - .su-hero__card { - max-width: 30%; - right: 5%; - } - } + .su-hero__media { + padding: 0 30px 10px 0; } - @include grid-media-max('lg') { - .su-hero__media { - max-width: 50%; - background-size: contain; - } - - .su-hero__card { - max-width: 40%; - } + .su-hero__card { + padding: 0 0 30px 30px; } + } - @include grid-media-max('md') { - .su-hero__media { - width: 50%; - } + @include grid-media-max('md') { + grid-template-columns: 1fr 40%; + grid-template-areas: "media card"; + gap: 10%; + } - .su-hero__card { - width: 40%; - right: 5%; - } + &.su-hero { + .su-hero__card { + grid-area: card; + margin-left: 0; } - @include grid-media-max('sm') { - .su-hero__media { - padding-right: 30px; - max-width: unset; - width: 100%; - } + .su-hero__media { + grid-area: media; + max-width: unset; + width: unset; + left: 0; + } + } - .su-hero__card { - max-width: 100%; - padding: 3.0rem; - right: unset; - width: 100%; + &.su-hero { + .su-hero__media { + img { + border-top-right-radius: 300px; + border-bottom-right-radius: 300px; } } } @@ -128,15 +146,41 @@ .overlay-left { align-items: baseline; display: grid; - grid-template-columns: repeat(2,1fr); + grid-template-columns: 25%, 75%; grid-template-areas: "card media"; + column-gap: 100px; + + @include grid-media('lg') { + grid-template-columns: 40% 60%; + column-gap: 5%; + } + + @include grid-media('xl') { + grid-template-columns: 40% 60%; + } + + @include grid-media-min('2xl') { + grid-template-columns: 50% 50%; + } + + @media (min-width: 2500px) { + .su-hero__media { + img { + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + } + } + } @include grid-media-max('sm') { display: block; - padding: 0 0 30px 30px; .su-hero__media { - padding-bottom: 10px; + padding: 0 0 10px 30px; + } + + .su-hero__card { + padding: 0 30px 0 30px; } } @@ -150,6 +194,7 @@ .su-hero__card { grid-area: card; + justify-self: flex-end; } .su-hero__media { @@ -166,4 +211,3 @@ } } } - diff --git a/src/scss/components/banner/_homepage.scss b/src/scss/components/banner/_banner--homepage.scss similarity index 98% rename from src/scss/components/banner/_homepage.scss rename to src/scss/components/banner/_banner--homepage.scss index b6a1fe6..52a6df6 100644 --- a/src/scss/components/banner/_homepage.scss +++ b/src/scss/components/banner/_banner--homepage.scss @@ -5,6 +5,7 @@ // .chemh-wrapper--banner-homepage // .chemh-wrapper--banner-halfpill // .chemh-wrapper--banner-wholepill +// .chemh-wrapper--banner-halfpill-title .chemh-wrapper--banner-homepage { max-width: 1600px; diff --git a/src/scss/components/banner/index.scss b/src/scss/components/banner/index.scss index d6846ec..fca5b37 100644 --- a/src/scss/components/banner/index.scss +++ b/src/scss/components/banner/index.scss @@ -2,5 +2,8 @@ // Banner Roll Up -@import 'halfpill'; -@import 'homepage'; +@import 'banner--halfpill'; +@import 'banner--fullpill'; +@import 'banner--general'; +@import 'banner--homepage'; +@import 'banner--halfpill-title'; diff --git a/src/scss/components/card/index.scss b/src/scss/components/card/index.scss index 99b4feb..827ce6d 100644 --- a/src/scss/components/card/index.scss +++ b/src/scss/components/card/index.scss @@ -1,5 +1,4 @@ @charset "UTF-8"; // Card Roll Up - @import 'minimal-border'; diff --git a/src/scss/components/events/_event-card.scss b/src/scss/components/events/_event-card.scss new file mode 100644 index 0000000..63fd678 --- /dev/null +++ b/src/scss/components/events/_event-card.scss @@ -0,0 +1,123 @@ +@charset "UTF-8"; + +.su-event-card { + @include chemh--shadow-custom-button-default; + border-bottom-left-radius: 6rem; + padding-top: 0; + + // Whole card hover and focus + &:hover, + &:focus, + &:focus-within, + &:active { + @include chemh--shadow-news-card-hover; + + .su-event-card__footer { + a { + background-color: $chemh-color-red; + } + } + } + + &.su-card { + .su-event-list-item__date { + background: black; + width: fit-content; + padding: 0.8rem 3rem; + max-width: unset; + + .su-event-list-item__date__seperator { + color: #fff; + font-weight: 900; + margin-right: 2rem; + margin-left: 2rem; + } + + .su-event-start-month, + .su-event-start-date, + .su-event-end-month, + .su-event-end-date { + font-weight: 400; + color: #fff; + } + } + + .su-event-list-item__details { + .event-list-item__type { + display: block; + padding-bottom: 1rem; + + a { + @include type_f; + color: $chemh-color-dusk; + text-decoration: none; + text-transform: uppercase; + font-weight: 600; + } + } + + h2 { + a { + &:hover, + &:focus, + &:focus-within, + &:active { + color: $chemh-color-digital-blue; + } + + } + } + } + } + + &.su-card { + position: relative; + border: none; + height: 100%; + + @media (max-width: 1550px) { + margin-bottom: 4.5rem; + } + + @include grid-media-max('md') { + width: 100%; + } + } + + .su-event-card__footer { + margin-top: 2rem; + + a { + position: absolute; + right: 0; + bottom: 0; + padding: 1.3rem; + background-color: $chemh-color-dusk; + color: $su-color-white; + -webkit-box-shadow: unset; + box-shadow: unset; + + &:hover, + &:focus, + &:active { + background-color: $chemh-color-red; + + .su-link--icon, + .su-link--icon--external { + border-bottom: 2px solid white; + color: $su-color-white; + } + } + } + } + + // Removing the external icon to move it to the + // lower right corner of event card. + a { + &.su-link--external { + &::after { + display: none; + } + } + } +} diff --git a/src/scss/components/events/_event-node.scss b/src/scss/components/events/_event-node.scss new file mode 100644 index 0000000..7b2b4c4 --- /dev/null +++ b/src/scss/components/events/_event-node.scss @@ -0,0 +1,197 @@ +@charset "UTF-8"; + +.node.event { + .section-editorial-content { + @include responsive-spacing('padding-top', 3); + + background: $su-color-black url(../../assets/png/header-sm-000--cropped.png) no-repeat 5%/cover; + max-width: 100%; + width: 100%; + padding-bottom: 0; + + @include grid-media-min('2xl') { + background: $su-color-black url(../../assets/png/header-sm-000--cropped.png) no-repeat 50%/cover; + } + + .su-event-type { + text-align: center; + + a, + p { + color: $su-color-white; + text-transform: uppercase; + letter-spacing: .3rem; + margin-bottom: .5rem; + opacity: .9; + } + } + + .su-event-headline { + width: 100%; + max-width: 100%; + text-align: center; + + h1 { + @include chemh-heading--badge; + @include responsive-spacing('margin-bottom', 3); + + color: $su-color-white; + + &::before { + margin: 3rem auto; + } + } + } + + .su-event-subheadline { + max-width: 100%; + text-align: center; + background: white; + margin: 0 auto; + + @include grid-media-min('sm') { + width: 70%; + } + + &::before { + @include chemh-main-nav--gradient; + + content: ''; + height: 1rem; + display: block; + } + + h2 { + @include responsive-spacing('padding-top', 1); + @include type-b; + + margin-bottom: 0; + + @include grid-media-min('sm') { + text-align: start; + margin-left: 3.2rem; + } + + @include grid-media-min('md') { + margin-left: 5rem; + } + + @include grid-media-min('lg') { + margin-left: 8rem; + } + + @include grid-media-min('xl') { + margin-left: 10rem; + } + + } + } + + .node-stanford-event-su-event-dek { + max-width: 100%; + text-align: center; + background: white; + margin: 0 auto; + + @include grid-media-min('sm') { + width: 70%; + } + + .su-event-dek { + @include responsive-spacing('padding-top', 0); + + font-family: $su-font-serif; + font-style: italic; + font-size: 3rem; + margin: 0 auto; + + @include grid-media-min('sm') { + @include responsive-spacing('padding-bottom', 0); + + text-align: start; + border-bottom: 1px solid rgb(0, 0, 0); + width: auto; + max-width: 100%; + margin-left: 3.2rem; + margin-right: 3.2rem; + } + + @include grid-media-min('md') { + margin-left: 5rem; + margin-right: 5rem; + } + + @include grid-media-min('lg') { + margin-left: 8rem; + margin-right: 8rem; + } + + @include grid-media-min('xl') { + margin-left: 10rem; + margin-right: 10rem; + } + } + } + + .su-event-sponsor { + @include responsive-spacing('padding-top', 0); + + max-width: 100%; + text-align: center; + background: white; + margin: 0 auto; + + @include grid-media-min('sm') { + width: 70%; + } + + div { + @include grid-media-min('sm') { + text-align: start; + margin-left: 3.2rem; + } + + @include grid-media-min('md') { + margin-left: 5rem; + } + + @include grid-media-min('lg') { + margin-left: 8rem; + } + + @include grid-media-min('xl') { + margin-left: 10rem; + } + } + + } + } + + .su-events-details { + @include grid-media-min('sm') { + .details-wrapper { + border: 0; + box-shadow: none; + padding: 0; + + .details { + width: 100%; + } + } + } + } + + .section-event-more-block { + .more-link { + a { + @include chemh-button--gradient; + + &:focus, + &:hover { + background-color: $chemh-color-hover-peach; + } + + } + } + } +} diff --git a/src/scss/components/events/index.scss b/src/scss/components/events/index.scss new file mode 100644 index 0000000..b5564cd --- /dev/null +++ b/src/scss/components/events/index.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +// Events teaser Roll Up + +@import 'event-card'; +@import 'event-node'; diff --git a/src/scss/components/index.scss b/src/scss/components/index.scss index 48927ca..def71e8 100644 --- a/src/scss/components/index.scss +++ b/src/scss/components/index.scss @@ -24,6 +24,7 @@ @import 'banner/index.scss'; @import 'card/index.scss'; +@import 'events/index.scss'; @import 'header/index.scss'; @import 'local-footer/index.scss'; @import 'main-navigation/index.scss'; diff --git a/src/scss/theme/_button.scss b/src/scss/theme/_button.scss index c0a6a2c..4784291 100644 --- a/src/scss/theme/_button.scss +++ b/src/scss/theme/_button.scss @@ -9,6 +9,7 @@ .su-button--big, .su-button--big.su-link, .stanford-news-vertical-teaser-term .more-link a, +.node.event .more-link a, [type=button], [type=image], [type=reset], @@ -35,6 +36,8 @@ button { .su-button:hover, .stanford-news-vertical-teaser-term .more-link a:focus, .stanford-news-vertical-teaser-term .more-link a:hover, +.node.event .more-link a:focus, +.node.event .more-link a:hover, [type=button]:focus, [type=button]:hover, [type=image]:focus, @@ -58,6 +61,7 @@ button:hover { .su-button--big.su-link:active, .su-button--big:active, .stanford-news-vertical-teaser-term .more-link a:active, +.node.event .more-link a, [type=button]:active, [type=image]:active, [type=reset]:active, @@ -76,7 +80,6 @@ button:hover { } } - main, footer { .su-button.su-link, @@ -84,6 +87,7 @@ footer { .su-button--big.su-link, .su-button--big, .stanford-news-vertical-teaser-term .more-link a, + .node.event .more-link a, button { @include chemh-button--gradient; @include modular-spacing('padding', 0); @@ -120,6 +124,7 @@ footer { .su-button, .stanford-news-vertical-teaser-term .more-link a { + .node.event .more-link a { &.su-link--external { &::after { height: 12px; @@ -225,11 +230,17 @@ a { .su-events-details { .su-event-cta { - a { - color: unset; - - &:hover { - background-color: unset; + &.su-button { + a { + &::after { + display: none; + } + + color: unset; + + &:hover { + background-color: unset; + } } } } diff --git a/src/scss/theme/_headings.scss b/src/scss/theme/_headings.scss index 0861c4e..220b118 100644 --- a/src/scss/theme/_headings.scss +++ b/src/scss/theme/_headings.scss @@ -4,7 +4,6 @@ h1 { font-weight: $su-font-black; - font-size: 5.5rem; line-height: 110%; /* identical to box height, or 61px */ color: $su-color-black; @@ -12,8 +11,8 @@ h1 { } h2 { + @include type-a; font-weight: $su-font-black; - font-size: 5rem; line-height: 110%; /* identical to box height, or 55px */ letter-spacing: -0.05em; @@ -21,8 +20,8 @@ h2 { } h3 { + @include type-b; font-weight: $su-font-bold; - font-size: 3.5rem; line-height: 5.2rem; /* identical to box height, or 149% */ letter-spacing: -1.5px; @@ -30,8 +29,8 @@ h3 { } h4 { + @include type-c; font-weight: $su-font-bold; - font-size: 2.8rem; line-height: 3.8rem; /* identical to box height, or 136% */ letter-spacing: -1px; @@ -39,8 +38,8 @@ h4 { } h5 { + @include type-c; font-weight: $su-font-bold; - font-size: 2.8rem; line-height: 3.8rem; /* identical to box height, or 136% */ letter-spacing: -1px; diff --git a/src/scss/utilities/variables/_sizes.scss b/src/scss/utilities/variables/_sizes.scss new file mode 100644 index 0000000..0c153a4 --- /dev/null +++ b/src/scss/utilities/variables/_sizes.scss @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +// Max-width variables for _banner-in-page--no-image.scss +$banner-b--lg: 864px; +$banner-b--xl: 1024px; diff --git a/src/scss/utilities/variables/index.scss b/src/scss/utilities/variables/index.scss index 2d05e48..11b3a03 100644 --- a/src/scss/utilities/variables/index.scss +++ b/src/scss/utilities/variables/index.scss @@ -8,3 +8,4 @@ @import 'colors'; @import 'magic-numbers'; +@import 'sizes'; diff --git a/templates/components/event-card/pattern-events-card.html.twig b/templates/components/event-card/pattern-events-card.html.twig new file mode 100644 index 0000000..902d621 --- /dev/null +++ b/templates/components/event-card/pattern-events-card.html.twig @@ -0,0 +1,170 @@ +{# + Event list item + + Template for an Event List Item. + + * Available variables: + * - attributes: For additional HTML attributes not already provided. + * - modifier_class: Additional CSS classes to change look and behavior. + * - start_month: Starting month of the event. + * - start_date: Date of the event + * - end_month: Ending month of the event if it spans more than one day. + * - end_date: Ending day of the event if it spans more than one day. + * - audience: Optional audience for the event. + * - headline: Title of the event. Can be a link off to another website. + * - subheadline: Optional subtile for the event. + * - dek: Descriptive dek/deck for the event. + * - date_time: Date and time for the event. + * - location: Where it is being held. +#} +{{ attach_library('stanford_events/events_list') }} + +{%- set attributes = attributes.addClass(['su-card su-event-card su-event-list-item', modifier_class]) -%} +{%- set event_url = event_url|render_clean -%} + +{# Clean up the date fields. #} +{%- set start_date = start_date|render_clean -%} +{%- set end_date = end_date|render_clean -%} +{%- set start_month = start_month|render_clean -%} +{%- set end_month = end_month|render_clean -%} + +{# Separate URL and title #} +{%- set link_attributes = create_attribute({'class': ['su-link']}) -%} +{%- set is_external = false -%} +{%- if url|render_clean is not empty -%} + {%- set is_external = url|render|striptags|split('//')[1] ? true : false -%} + {%- if is_external -%} + {%- set link_attributes = link_attributes.addClass('su-link--external') -%} + {%- endif %} +{%- endif -%} + +