diff --git a/.nvmrc b/.nvmrc index 9306ff9..209e3ef 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14.8.0 +20 diff --git a/chem_h_subtheme.info.yml b/chem_h_subtheme.info.yml index c0b4296..44a8f12 100755 --- a/chem_h_subtheme.info.yml +++ b/chem_h_subtheme.info.yml @@ -2,8 +2,8 @@ name: ChEM-H Subtheme type: theme description: 'ChEM-H Subtheme.' package: Stanford -version: 8.x-1.0-dev -core_version_requirement: ^9 +version: 1.0.1 +core_version_requirement: ^9 || ^10 base theme: stanford_basic libraries: - chem_h_subtheme/allpages diff --git a/chem_h_subtheme.libraries.yml b/chem_h_subtheme.libraries.yml index 8a05092..da42a25 100755 --- a/chem_h_subtheme.libraries.yml +++ b/chem_h_subtheme.libraries.yml @@ -92,4 +92,4 @@ allpages: theme: dist/css/chem_h_subtheme.css: {minified: true } js: - dist/js/scripts.js: { scope: footer } + src/js/chemhsubtheme.behaviors.js: { scope: footer } diff --git a/chem_h_subtheme.theme b/chem_h_subtheme.theme index 7a6e143..171058e 100755 --- a/chem_h_subtheme.theme +++ b/chem_h_subtheme.theme @@ -8,7 +8,7 @@ * Prepares variables for the html.html.twig template. */ function chem_h_subtheme_preprocess_html(&$variables) { - $variables['stanford_basic_path'] = drupal_get_path('theme', 'stanford_basic'); + \Drupal::service('extension.list.theme')->getPath('stanford_basic'); $twittercard = [ '#tag' => 'meta', @@ -58,7 +58,7 @@ function chem_h_subtheme_preprocess_html(&$variables) { ], ]; - // Is front page variable + // Is front page variable // set the front variable to add meta tags to on the homepage. if (\Drupal::service('path.matcher')->isFrontPage()) { $variables['page']['#attached']['html_head'][] = [$twittercard, 'twitter:card']; @@ -128,7 +128,7 @@ function chem_h_subtheme_preprocess_card(&$variables) { // Check for media in a card then set classes. if (!$imageCount) { return; - } + } } /** diff --git a/dist/assets/png/Sarafan_ChEM-H_Gradient_dark_16.9.png b/dist/assets/png/Sarafan_ChEM-H_Gradient_dark_16.9.png deleted file mode 100644 index d7376b2..0000000 Binary files a/dist/assets/png/Sarafan_ChEM-H_Gradient_dark_16.9.png and /dev/null differ diff --git a/dist/css/chem_h_subtheme.css b/dist/css/chem_h_subtheme.css index 4b4ef46..25bfbbd 100644 --- a/dist/css/chem_h_subtheme.css +++ b/dist/css/chem_h_subtheme.css @@ -1 +1 @@ -.su-card-wrapper--border-none .su-card{-webkit-box-shadow:none;box-shadow:none;border:none}.su-local-footer{color:#fff;background-image:linear-gradient(327deg,#10a29b,rgba(12,161,113,.8) 8.2%,rgba(89,154,8,.6) 16.4%,rgba(144,137,5,.4) 24.6%,rgba(255,0,0,0) 41%),linear-gradient(19deg,#3a2a78,rgba(94,45,123,.8) 20%,rgba(124,47,129,.6) 40%,rgba(153,49,133,.4) 60%,rgba(217,46,116,0)),radial-gradient(50% 50% at 50% 97%,#55777f 17%,rgba(82,118,174,.75) 37.75%,rgba(175,75,213,.5) 58.5%,rgba(255,0,0,0) 100%),linear-gradient(50deg,rgba(167,96,66,0) 32%,rgba(167,96,66,.25) 44.5%,rgba(167,96,66,.5) 57%,#a76042 82%),radial-gradient(37.5% 37.5% at 49% 27%,#ab2033 36%,rgba(191,30,50,.75) 52%,rgba(212,26,45,.5) 68%,rgba(255,0,0,0) 100%),linear-gradient(134deg,#8e2049 25%,rgba(157,32,75,.86) 35.71%,rgba(172,32,76,.71) 46.43%,rgba(187,30,75,.57) 57.14%,rgba(204,27,72,.43) 67.86%,rgba(220,23,64,.29) 78.57%,rgba(255,0,0,0));background-color:#2e2d29}.su-local-footer .su-link,.su-local-footer .su-local-footer__social-links i:before,.su-local-footer .su-lockup__line1,.su-local-footer .su-lockup__line2,.su-local-footer .su-lockup__line3,.su-local-footer .su-lockup__line4,.su-local-footer .su-lockup__line5,.su-local-footer .su-lockup__wordmark,.su-local-footer a{color:#fff}.su-local-footer .su-link:active,.su-local-footer .su-link:focus,.su-local-footer .su-link:hover,.su-local-footer a:active,.su-local-footer a:focus,.su-local-footer a:hover{color:#dad7cb}.su-local-footer .su-link:active:after,.su-local-footer .su-link:after,.su-local-footer .su-link:focus:after,.su-local-footer .su-link:hover:after,.su-local-footer a:active:after,.su-local-footer a:after,.su-local-footer a:focus:after,.su-local-footer a:hover:after{background-color:#fff}.su-local-footer .su-link.mailto svg,.su-local-footer .su-link.su-link--external,.su-local-footer a.mailto svg,.su-local-footer a.su-link--external{color:#fff;fill:#fff}.su-local-footer .su-link.mailto svg:active,.su-local-footer .su-link.mailto svg:focus,.su-local-footer .su-link.mailto svg:hover,.su-local-footer .su-link.su-link--external:active,.su-local-footer .su-link.su-link--external:focus,.su-local-footer .su-link.su-link--external:hover,.su-local-footer a.mailto svg:active,.su-local-footer a.mailto svg:focus,.su-local-footer a.mailto svg:hover,.su-local-footer a.su-link--external:active,.su-local-footer a.su-link--external:focus,.su-local-footer a.su-link--external:hover{fill:#dad7cb}.su-local-footer .su-link.mailto svg:active:after,.su-local-footer .su-link.mailto svg:focus:after,.su-local-footer .su-link.mailto svg:hover:after,.su-local-footer .su-link.su-link--external:active:after,.su-local-footer .su-link.su-link--external:focus:after,.su-local-footer .su-link.su-link--external:hover:after,.su-local-footer a.mailto svg:active:after,.su-local-footer a.mailto svg:focus:after,.su-local-footer a.mailto svg:hover:after,.su-local-footer a.su-link--external:active:after,.su-local-footer a.su-link--external:focus:after,.su-local-footer a.su-link--external:hover:after{background-color:#dad7cb}.su-local-footer .su-link.mailto svg:after,.su-local-footer .su-link.su-link--external:after,.su-local-footer a.mailto svg:after,.su-local-footer a.su-link--external:after{background-color:#fff}.su-local-footer .su-local-footer__action-links a{color:#fff}.su-local-footer .su-local-footer__action-links a:active,.su-local-footer .su-local-footer__action-links a:focus,.su-local-footer .su-local-footer__action-links a:hover{color:#dad7cb}.su-local-footer .su-link--external.su-button,.su-local-footer .su-link--external.su-button--big,.su-local-footer a.su-button,.su-local-footer a.su-button--big{color:#fff;fill:#fff}.su-local-footer .su-link--external.su-button--big:active,.su-local-footer .su-link--external.su-button--big:focus,.su-local-footer .su-link--external.su-button--big:hover,.su-local-footer .su-link--external.su-button:active,.su-local-footer .su-link--external.su-button:focus,.su-local-footer .su-link--external.su-button:hover,.su-local-footer a.su-button--big:active,.su-local-footer a.su-button--big:focus,.su-local-footer a.su-button--big:hover,.su-local-footer a.su-button:active,.su-local-footer a.su-button:focus,.su-local-footer a.su-button:hover{fill:#fff}.su-local-footer .su-link--external.su-button--big:active:after,.su-local-footer .su-link--external.su-button--big:after,.su-local-footer .su-link--external.su-button--big:focus:after,.su-local-footer .su-link--external.su-button--big:hover:after,.su-local-footer .su-link--external.su-button:active:after,.su-local-footer .su-link--external.su-button:after,.su-local-footer .su-link--external.su-button:focus:after,.su-local-footer .su-link--external.su-button:hover:after,.su-local-footer a.su-button--big:active:after,.su-local-footer a.su-button--big:after,.su-local-footer a.su-button--big:focus:after,.su-local-footer a.su-button--big:hover:after,.su-local-footer a.su-button:active:after,.su-local-footer a.su-button:after,.su-local-footer a.su-button:focus:after,.su-local-footer a.su-button:hover:after{background-color:#fff}nav[aria-label^=footer] a,nav[aria-label^=footer] a.su-link--external{color:#fff}nav[aria-label^=footer] a.su-link--external:active,nav[aria-label^=footer] a.su-link--external:focus,nav[aria-label^=footer] a.su-link--external:hover,nav[aria-label^=footer] a:active,nav[aria-label^=footer] a:focus,nav[aria-label^=footer] a:hover{color:#dad7cb}nav[aria-label^=footer] a.su-link--external:active:after,nav[aria-label^=footer] a.su-link--external:after,nav[aria-label^=footer] a.su-link--external:focus:after,nav[aria-label^=footer] a.su-link--external:hover:after,nav[aria-label^=footer] a:active:after,nav[aria-label^=footer] a:after,nav[aria-label^=footer] a:focus:after,nav[aria-label^=footer] a:hover:after{background-color:#fff}.news .su-wysiwyg-text h2{font-size:1.25em;letter-spacing:-.01em}.su-wysiwyg-text .su-button,.su-wysiwyg-text .su-button--big{background-color:#512d6d}.su-wysiwyg-text .su-button--big:active,.su-wysiwyg-text .su-button--big:focus,.su-wysiwyg-text .su-button--big:hover,.su-wysiwyg-text .su-button:active,.su-wysiwyg-text .su-button:focus,.su-wysiwyg-text .su-button:hover{background-color:#2e2d29}.su-wysiwyg-text .su-button--secondary{-webkit-box-shadow:0 0 0 2px #512d6d;box-shadow:0 0 0 2px #512d6d;color:#512d6d}.su-button:active,.su-button:focus,.su-button:hover{background-color:#2e2d29}.su-wrapper--button-purple .su-button a,.su-wrapper--button-purple .su-card__button a{background-color:#512d6d}.su-wrapper--button-teal .su-button a,.su-wrapper--button-teal .su-card__button a{background-color:#259591}.su-wrapper--button-red .su-button a,.su-wrapper--button-red .su-card__button a{background-color:#b1040e} \ No newline at end of file +.su-card-wrapper--border-none .su-card{border:none;-webkit-box-shadow:none;box-shadow:none}.su-local-footer{background-color:#2e2d29;background-image:linear-gradient(327deg,#10a29b,rgba(12,161,113,.8) 8.2%,rgba(89,154,8,.6) 16.4%,rgba(144,137,5,.4) 24.6%,rgba(255,0,0,0) 41%),linear-gradient(19deg,#3a2a78,rgba(94,45,123,.8) 20%,rgba(124,47,129,.6) 40%,rgba(153,49,133,.4) 60%,rgba(217,46,116,0)),radial-gradient(50% 50% at 50% 97%,#55777f 17%,rgba(82,118,174,.75) 37.75%,rgba(175,75,213,.5) 58.5%,rgba(255,0,0,0) 100%),linear-gradient(50deg,rgba(167,96,66,0) 32%,rgba(167,96,66,.25) 44.5%,rgba(167,96,66,.5) 57%,#a76042 82%),radial-gradient(37.5% 37.5% at 49% 27%,#ab2033 36%,rgba(191,30,50,.75) 52%,rgba(212,26,45,.5) 68%,rgba(255,0,0,0) 100%),linear-gradient(134deg,#8e2049 25%,rgba(157,32,75,.86) 35.71%,rgba(172,32,76,.71) 46.43%,rgba(187,30,75,.57) 57.14%,rgba(204,27,72,.43) 67.86%,rgba(220,23,64,.29) 78.57%,rgba(255,0,0,0));color:#fff}.su-local-footer .su-link,.su-local-footer .su-local-footer__social-links i:before,.su-local-footer .su-lockup__line1,.su-local-footer .su-lockup__line2,.su-local-footer .su-lockup__line3,.su-local-footer .su-lockup__line4,.su-local-footer .su-lockup__line5,.su-local-footer .su-lockup__wordmark,.su-local-footer a{color:#fff}.su-local-footer .su-link:active,.su-local-footer .su-link:focus,.su-local-footer .su-link:hover,.su-local-footer a:active,.su-local-footer a:focus,.su-local-footer a:hover{color:#dad7cb}.su-local-footer .su-link:active:after,.su-local-footer .su-link:after,.su-local-footer .su-link:focus:after,.su-local-footer .su-link:hover:after,.su-local-footer a:active:after,.su-local-footer a:after,.su-local-footer a:focus:after,.su-local-footer a:hover:after{background-color:#fff}.su-local-footer .su-link.mailto svg,.su-local-footer .su-link.su-link--external,.su-local-footer a.mailto svg,.su-local-footer a.su-link--external{fill:#fff;color:#fff}.su-local-footer .su-link.mailto svg:active,.su-local-footer .su-link.mailto svg:focus,.su-local-footer .su-link.mailto svg:hover,.su-local-footer .su-link.su-link--external:active,.su-local-footer .su-link.su-link--external:focus,.su-local-footer .su-link.su-link--external:hover,.su-local-footer a.mailto svg:active,.su-local-footer a.mailto svg:focus,.su-local-footer a.mailto svg:hover,.su-local-footer a.su-link--external:active,.su-local-footer a.su-link--external:focus,.su-local-footer a.su-link--external:hover{fill:#dad7cb}.su-local-footer .su-link.mailto svg:active:after,.su-local-footer .su-link.mailto svg:focus:after,.su-local-footer .su-link.mailto svg:hover:after,.su-local-footer .su-link.su-link--external:active:after,.su-local-footer .su-link.su-link--external:focus:after,.su-local-footer .su-link.su-link--external:hover:after,.su-local-footer a.mailto svg:active:after,.su-local-footer a.mailto svg:focus:after,.su-local-footer a.mailto svg:hover:after,.su-local-footer a.su-link--external:active:after,.su-local-footer a.su-link--external:focus:after,.su-local-footer a.su-link--external:hover:after{background-color:#dad7cb}.su-local-footer .su-link.mailto svg:after,.su-local-footer .su-link.su-link--external:after,.su-local-footer a.mailto svg:after,.su-local-footer a.su-link--external:after{background-color:#fff}.su-local-footer .su-local-footer__action-links a{color:#fff}.su-local-footer .su-local-footer__action-links a:active,.su-local-footer .su-local-footer__action-links a:focus,.su-local-footer .su-local-footer__action-links a:hover{color:#dad7cb}.su-local-footer .su-link--external.su-button,.su-local-footer .su-link--external.su-button--big,.su-local-footer a.su-button,.su-local-footer a.su-button--big{fill:#fff;color:#fff}.su-local-footer .su-link--external.su-button--big:active,.su-local-footer .su-link--external.su-button--big:focus,.su-local-footer .su-link--external.su-button--big:hover,.su-local-footer .su-link--external.su-button:active,.su-local-footer .su-link--external.su-button:focus,.su-local-footer .su-link--external.su-button:hover,.su-local-footer a.su-button--big:active,.su-local-footer a.su-button--big:focus,.su-local-footer a.su-button--big:hover,.su-local-footer a.su-button:active,.su-local-footer a.su-button:focus,.su-local-footer a.su-button:hover{fill:#fff}.su-local-footer .su-link--external.su-button--big:active:after,.su-local-footer .su-link--external.su-button--big:after,.su-local-footer .su-link--external.su-button--big:focus:after,.su-local-footer .su-link--external.su-button--big:hover:after,.su-local-footer .su-link--external.su-button:active:after,.su-local-footer .su-link--external.su-button:after,.su-local-footer .su-link--external.su-button:focus:after,.su-local-footer .su-link--external.su-button:hover:after,.su-local-footer a.su-button--big:active:after,.su-local-footer a.su-button--big:after,.su-local-footer a.su-button--big:focus:after,.su-local-footer a.su-button--big:hover:after,.su-local-footer a.su-button:active:after,.su-local-footer a.su-button:after,.su-local-footer a.su-button:focus:after,.su-local-footer a.su-button:hover:after{background-color:#fff}nav[aria-label^=footer] a,nav[aria-label^=footer] a.su-link--external{color:#fff}nav[aria-label^=footer] a.su-link--external:active,nav[aria-label^=footer] a.su-link--external:focus,nav[aria-label^=footer] a.su-link--external:hover,nav[aria-label^=footer] a:active,nav[aria-label^=footer] a:focus,nav[aria-label^=footer] a:hover{color:#dad7cb}nav[aria-label^=footer] a.su-link--external:active:after,nav[aria-label^=footer] a.su-link--external:after,nav[aria-label^=footer] a.su-link--external:focus:after,nav[aria-label^=footer] a.su-link--external:hover:after,nav[aria-label^=footer] a:active:after,nav[aria-label^=footer] a:after,nav[aria-label^=footer] a:focus:after,nav[aria-label^=footer] a:hover:after{background-color:#fff}.news .su-wysiwyg-text h2{font-size:1.25em;letter-spacing:-.01em}.su-wysiwyg-text .su-button,.su-wysiwyg-text .su-button--big{background-color:#512d6d}.su-wysiwyg-text .su-button--big:active,.su-wysiwyg-text .su-button--big:focus,.su-wysiwyg-text .su-button--big:hover,.su-wysiwyg-text .su-button:active,.su-wysiwyg-text .su-button:focus,.su-wysiwyg-text .su-button:hover{background-color:#2e2d29}.su-wysiwyg-text .su-button--secondary{-webkit-box-shadow:0 0 0 2px #512d6d;box-shadow:0 0 0 2px #512d6d;color:#512d6d}.su-button:active,.su-button:focus,.su-button:hover{background-color:#2e2d29}.su-wrapper--button-purple .su-button a,.su-wrapper--button-purple .su-card__button a{background-color:#512d6d}.su-wrapper--button-teal .su-button a,.su-wrapper--button-teal .su-card__button a{background-color:#259591}.su-wrapper--button-red .su-button a,.su-wrapper--button-red .su-card__button a{background-color:#b1040e} \ No newline at end of file diff --git a/dist/js/scripts.js b/dist/js/scripts.js deleted file mode 100644 index e938075..0000000 --- a/dist/js/scripts.js +++ /dev/null @@ -1,2 +0,0 @@ -!function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=1)}([,function(e,t,n){"use strict";n.r(t);n(2)},function(e,t){window.Drupal.behaviors.stanford_starter={attach:function(){},detach:function(){}}}]); -//# sourceMappingURL=scripts.js.map \ No newline at end of file diff --git a/dist/templates/decanter/components/accordion/accordion.twig b/dist/templates/decanter/components/accordion/accordion.twig deleted file mode 100644 index 316d668..0000000 --- a/dist/templates/decanter/components/accordion/accordion.twig +++ /dev/null @@ -1,39 +0,0 @@ -{# - Accordion - - Template for an expandable/collapsable section. - - * Available variables: - * - attributes: For additional HTML attributes not already provided. - * - modifier_class: Additional CSS classes to change look and behavior. - * - accordion_title: Optional title for the whole accordion component. - * - cta_button: Optional call-to-action link button at the bototm of the accordion. - * - title: - * - content: -#} -
- {% if accordion_title is not empty %} - {{ accordion_title }} - {% endif %} - {% if accordion_control %} - - - {% endif %} - {% if accordion_items is iterable %} - - {% endif %} - {% if cta_button_text is not empty %} - {{ cta_button_text }} - {% endif %} -
\ No newline at end of file diff --git a/dist/templates/decanter/components/alert/alert.twig b/dist/templates/decanter/components/alert/alert.twig deleted file mode 100644 index 897a337..0000000 --- a/dist/templates/decanter/components/alert/alert.twig +++ /dev/null @@ -1,72 +0,0 @@ -{# -/** - * @file - * Alert Component. - * - * Component for displaying a notification that keeps people informed of a - * status, or for displaying a validation message that alerts someone of an - * important piece of information. It has five variants: - * - Default: Black text with gray background with no icon - * - Success: Black text with green background with check icon - * - Warning: Black text with yellow background with traiangular exclamation mark icon - * - Error: Black text with red background with circlular exclamation mark icon - * - Info: Black text with blue background with information icon - * - * Available variables: - * - attributes: For additional HTML attributes not already provided. - * - modifier_class: Additional css classes to change look and behaviour. - * - alert_header: Text heading. - * - alert_body: Text details of the alert message. - */ -#} -
-
- {# JavaScript Ability To Close and Hide Alert. #} - {%- block block_dismiss -%} - {%- if alert_dismiss -%} -
- -
- {%- endif -%} - {%- endblock -%} - - {# Header, sometimes left, content. #} - {%- block block_alert_header -%} - {%- if alert_icon is not empty or alert_label is not empty -%} -
- {%- if alert_icon is not empty -%} - {{- alert_icon -}} - {%- endif -%} - {%- if alert_label is not empty -%} - {{- alert_label -}} - {%- endif -%} -
- {%- endif -%} - {%- endblock -%} - - {# Body content and the primary message. #} - {%- block block_body -%} -
- - {# HEADER #} - {%- if alert_header is not empty -%} -

{{- alert_header -}}

- {%- endif -%} - - {# TEXT #} - {%- if alert_text is not empty -%} -
- {{- alert_text -}} -
- {%- endif -%} - - {# FOOTER #} - {%- if alert_footer is not empty -%} -
- {{- alert_footer -}} -
- {%- endif -%} -
- {%- endblock -%} -
-
diff --git a/dist/templates/decanter/components/brand-bar/brand-bar.twig b/dist/templates/decanter/components/brand-bar/brand-bar.twig deleted file mode 100644 index f05578e..0000000 --- a/dist/templates/decanter/components/brand-bar/brand-bar.twig +++ /dev/null @@ -1,25 +0,0 @@ -{# -/** - * @file - * Brand Bar Component. - * - * Stanford brand bar with the wordmark logo with four variants: - * - Default: White wordmark over cardinal red background - * - Bright: White wordmark over bright red background - * - Dark: White wordmark over dark grey background - * - White: Cardinal red wordmark over white background - * - * Available variables: - * - attributes: For additional HTML attributes not already provided. - * - modifier_class: Additional css classes to change look and behaviour. - */ -#} -{% if external_link_text is empty -%} - {%- set external_link_text -%} - (link is external) - {% endset %} -{%- endif %} - -
-
-
diff --git a/dist/templates/decanter/components/button/button.twig b/dist/templates/decanter/components/button/button.twig deleted file mode 100644 index 6536d4e..0000000 --- a/dist/templates/decanter/components/button/button.twig +++ /dev/null @@ -1,19 +0,0 @@ -{# -/** - * @file - * Button Component - * - * A basic button element. - * - * Available variants: - * - * Available variables: - * - attributes: A collection of html properties for button - * - modifier_class: CSS class variants - * - button_value: Button's value property - * - button_name: Button's name property - * - button_type: The type of button (submit | button | reset) - * - button_label: The text to display as the button - */ -#} -{{ button_label }} diff --git a/dist/templates/decanter/components/card/card.twig b/dist/templates/decanter/components/card/card.twig deleted file mode 100644 index 632d800..0000000 --- a/dist/templates/decanter/components/card/card.twig +++ /dev/null @@ -1,198 +0,0 @@ -{# -/** - * @file - * Card Component. Default is a vertical card with an image above text content. - * - * Available variants: - * - .su-card--horizontal: Media field and text content are side by side. - * - .su-card--link: Whole card is a link with no button or call to action link. - * - .su-card--minimal: No background, drop shadow and space around. Do not use with the .su-card--link class. - * - .su-card--icon: An image icon above text content. - * - .su-card--video: A video above text content. - * - * Available variables: - * - attributes: Additional HTML attributes not already provided. - * - modifier_class: Additional CSS classes to change look and behavior. - * - card_headline: Main headind text for the card. - * - card_allow_headline_link: Boolean. If set to true, headline links to card_link. - * - card_super_headline: Text super headline. Often used for metadata such as category. - * - card_body: An open variable for anything including HTML. Generally this would be for WYSIWYG editor contents. - * - card_link: The href value for the card. A single card is only allowed to link to one URL. - * - card_cta_attributes: Any html attributes on the link that need to be added. For example: rel='noopener', target='_blank'. - * This acts as the attributes for the link button and headline link as well. - * - card_cta_label: The clickable text for the CTA link - * - card_button_label: The text label of the button component. - * - card_icon_font_class: If using icon font, e.g., FontAwesome, the class(es) of the icon including modifier classes, - e.g. 'fas fa-globe fa-2x', 'far fa-thumbs-up fa-rotate-90' - * - card_media_image_src: The src link to the image file. - * - card_media_image_srcset: The srcset of the image if exists. - * - card_media_icon_image_src: The src link to the icon image file. - * - card_media_video_src: The src link to the video file. - * - card_media_video_poster: Optional preview image of the video. - * - card_media_fallback_content: Fallback content to display when browser doesn't support video or audio format. - * - card_allow_media_link: Boolean. If set to true, media element (image or self-hosted video) links to card_link. - * - card_media_type: Type of the media file, e.g. mp4, webm, quicktime (self-hosted video only). - * - card_media_custom: An open field for the full HTML element of the media content, e.g., an embedded YouTube iframe. - * - card_media_modifier_class: Additional CSS classes to change look and behavior of the media media element. - * - card_media_attributes: Additional HTML attributes for the media element not already provided. - * - card_media_wrapper_modifier_class: Additional CSS classes to change look and behavior of the media wrapper, e.g. "su-aspect-ratio" to provide aspect ratio constraint. - * - card_media_content_attributes: Additional HTML attributes for the media content, e.g., for