@ilo-org/twig 0.17.0 → 0.18.0

package/dist/components/form/input.twig

@@ -0,0 +1,10 @@
+{# text-input.twig #}
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = 'ilo' ~ "--text-input" %}
+{% set inputClass = [baseClass] %}
+{% if error %}
+	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}
+{% endif %}
+
+<input id="{{ id ? id : name }}" name="{{ name }}" {% if disabled %} disabled {% endif %} placeholder="{{ placeholder }}" {% if required %} required {% endif %} type="{{ type }}" class="{{ inputClass|join(' ') }}" {% if pattern %} pattern="{{ pattern }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}/>

package/dist/components/formcontrol/formcontrol.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--form-control{grid-area:a;display:inline-grid;grid-template-rows:auto;grid-template-columns:auto;gap:.4287245445rem}.ilo--form-control__label-placement__start .ilo--form-control--label{grid-area:1/1/2/2}.ilo--form-control__label-placement__start :nth-child(2){grid-area:1/2/2/3}.ilo--form-control__label-placement__start .ilo--form-control--helper{grid-area:2/2/3/3}.ilo--form-control__label-placement__start [class*=file-upload--list]{grid-area:3/1/4/3}.ilo--form-control__label-placement__end .ilo--form-control--label{grid-area:1/2/2/3}.ilo--form-control__label-placement__end :nth-child(2){grid-area:1/1/2/2}.ilo--form-control__label-placement__end .ilo--form-control--helper{grid-area:2/1/3/3}.ilo--form-control__label-placement__end [class*=file-upload--list]{grid-area:3/1/4/4}.ilo--form-control__label-placement__top .ilo--form-control--label{grid-area:1/1/2/2}.ilo--form-control__label-placement__top :nth-child(2){grid-area:2/1/3/2}.ilo--form-control__label-placement__top .ilo--form-control--helper{grid-area:3/1/4/2}.ilo--form-control__label-placement__top [class*=file-upload--list]{grid-area:4/1/5/2}.ilo--form-control__label-placement__bottom .ilo--form-control--label{grid-area:3/1/4/2}.ilo--form-control__label-placement__bottom :nth-child(2){grid-area:2/1/3/2}.ilo--form-control__label-placement__bottom .ilo--form-control--helper{grid-area:1/1/2/2}.ilo--form-control__label-placement__bottom [class*=file-upload--list]{grid-area:4/1/5/2}.ilo--form-control__disabled .ilo--form-control--helper,.ilo--form-control__disabled .ilo--form-control--label{opacity:.5;pointer-events:none}.ilo--form-control__error .ilo--form-control--helper{color:#c8303c}.ilo--form-control--label{color:#2d2d2d;grid-area:g;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start}.ilo--form-control--label__size__small{font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-size:.8001071811rem;letter-spacing:-.0010718114rem;line-height:1.0803858521rem;font-weight:400}.ilo--form-control--label__size__medium{font-size:.857449089rem;line-height:1.1575562701rem}.ilo--form-control--label__size__large,.ilo--form-control--label__size__medium{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;letter-spacing:-.0010718114rem;font-weight:700}.ilo--form-control--label__size__large{font-size:1rem;line-height:1.3001071811rem}.ilo--form-control--label label{font-family:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;font-weight:inherit}.ilo--form-control--label div[class*=tooltip]{margin-left:.4287245445rem}[dir=rtl] .ilo--form-control--label div[class*=tooltip]{margin-right:.4287245445rem}.ilo--form-control--helper{grid-area:h;color:#6d6d6d;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--form-control .ilo--tooltip--wrapper{bottom:.1071811361rem}

package/dist/components/heading/heading.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--h1,.ilo--h2,.ilo--h3,.ilo--h4,.ilo--h5,.ilo--h6{color:inherit;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700}.ilo--h1--default,.ilo--h2--default,.ilo--h3--default,.ilo--h4--default,.ilo--h5--default,.ilo--h6--default{color:#2d2d2d}.ilo--h1--actionable,.ilo--h2--actionable,.ilo--h3--actionable,.ilo--h4--actionable,.ilo--h5--actionable,.ilo--h6--actionable{color:#960a55}.ilo--h1--light,.ilo--h2--light,.ilo--h3--light,.ilo--h4--light,.ilo--h5--light,.ilo--h6--light{color:#fff}.ilo--h1{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}@media screen and (min-width:610px){.ilo--h1{font-size:56.95px;letter-spacing:-.035em;line-height:65.49px}}.ilo--h2{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}@media screen and (min-width:610px){.ilo--h2{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}}.ilo--h3{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}@media screen and (min-width:610px){.ilo--h3{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}}.ilo--h4{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px}@media screen and (min-width:610px){.ilo--h4{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}}.ilo--h5{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}@media screen and (min-width:610px){.ilo--h5{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px}}.ilo--h6{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}@media screen and (min-width:610px){.ilo--h6{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}}

package/dist/components/hero/hero.css

@@ -0,0 +1 @@
+.hero{--added-offset:0px;--base-offset:calc(((100vw - 1300px) / 2));--breadcrumb-padding:max(var(--base-offset),0.857449089rem);--card-padding-start:71px;--corner-cut-height:40px;width:100%;display:grid;position:relative;grid-template-columns:1fr;overflow:hidden;grid-template-rows:minmax(1rem,1fr) 27px 40px auto;--card-width:625px;--corner-cut-height:64px;--breadcrumbs-height:48px;--image-gap:240px;--row-1-lg:var(--breadcrumbs-height);--row-2-lg:calc(var(--image-gap) - var(--breadcrumbs-height));--row-3-lg:auto;--row-4-lg:27px;--row-5-lg:72px;--col-1-lg:0;--col-2-lg:var(--card-width);--col-3-lg:30px;--col-4-lg:1fr;grid-template-rows:var(--row-1-lg) var(--row-2-lg) var(--row-3-lg) var(--row-4-lg);grid-template-columns:var(--col-1-lg) var(--col-2-lg) var(--col-3-lg) var(--col-4-lg)}.hero--image{display:grid;grid-template-rows:minmax(216px,1fr) 27px 40px auto}.hero__gap__transparent{background:0 0}.hero__gap__white{background-color:#fff}.hero__gap__light{background-color:#ebf5fd}.hero__gap__dark{background-color:#230050}.hero--background{display:grid;background-color:#ebf5fd;position:relative;grid-area:1/1/4/2}.hero--background img{position:absolute;object-fit:cover;width:100%;height:100%}.hero--card{grid-area:3/1/5/2}.hero--caption{grid-area:2/1/3/2}.hero--caption--wrapper{background:#2d2d2d;height:27px;width:30px;display:flex;justify-content:center;align-items:center}.hero--caption--wrapper:after{content:"";position:absolute;top:0;width:0;height:0;border-top:27px solid transparent;left:100%;border-right:none;border-left:23px solid #2d2d2d}.hero__poster-size__small{--image-gap:112px}.hero__poster-size__medium{--image-gap:176px}.hero__poster-size__large{--image-gap:240px}.hero__poster-size__xlarge{--image-gap:527px}.hero__card-size__small{--card-width:625px}.hero__card-size__medium{--card-width:721px}.hero__card-size__large{--card-width:856px}.hero__card-size__xlarge{--card-width:920px}.hero__card-size__xxlarge{--card-width:998px}.hero__card-justify__offset,.hero__card-justify__start{--card-padding-start:max(16px,min(var(--base-offset) + var(--added-offset),71px));--col-1-lg:calc(var(--base-offset) - 71px + var(--added-offset))}.hero__card-justify__offset{--added-offset:109px}.hero__card-justify__center{--col-1-lg:calc((100% - var(--card-width)) / 2);--col-4-lg:calc(((100% - var(--card-width)) / 2) - 30px)}.hero__card-align__center{--row-4-lg:45px;--row-5-lg:27px}.hero__card-align__bottom{--row-3-lg:0;--row-4-lg:var(--corner-cut-height);--row-5-lg:auto}.hero__card-background__transparent .hero--card-offset{background-color:transparent!important}.hero__card-theme__dark .hero--card-offset{background-color:#230050;position:relative;box-shadow:.3px 0 0 0 #230050}.hero__card-theme__dark[class*=semi-transparent] .hero--card-offset{background:rgba(35,0,80,.6);box-shadow:.3px 0 0 0 rgba(35,0,80,.6)}.hero__card-theme__light .hero--card-offset{background:#fff;box-shadow:.3px 0 0 0 #fff}.hero__card-theme__light[class*=semi-transparent] .hero--card-offset{background:hsla(0,0%,100%,.6);box-shadow:.3px 0 0 0 hsla(0,0%,100%,.6)}.hero--breadcrumbs{grid-area:1/1/2/5;z-index:1;display:flex;flex-flow:row nowrap}.hero--breadcrumbs--wrapper{width:100%}.hero--background{grid-area:1/1/5/5}.hero__card-align__center .hero--background{grid-area:1/1/6/5}.hero__card-align__bottom .hero--background{grid-area:1/1/5/5}.hero--card-offset{grid-area:3/1/6/2;z-index:0;position:relative}.hero__card-justify__center .hero--card-offset,.hero__card-justify__offset .hero--card-offset{background:0 0!important}.hero__card-align__center .hero--card-offset{grid-area:3/1/4/2}.hero__card-align__bottom .hero--card-offset{grid-area:4/1/6/2}.hero--card{grid-area:3/2/6/3}.hero__card-align__center .hero--card{grid-area:3/2/4/3}.hero__card-align__bottom .hero--card{grid-area:4/2/6/3}.hero--caption{grid-area:4/3/5/4;position:relative}.hero__card-align__center .hero--caption{grid-area:5/1/6/3}.hero__card-align__bottom .hero--caption{grid-area:4/1/5/2}.hero__card-align__bottom .hero--caption--wrapper,.hero__card-align__center .hero--caption--wrapper{position:absolute;left:0;bottom:0}.hero__card-align__bottom.hero__card-justify__start .hero--caption{grid-area:1/1/3/3}.hero__card-align__bottom.hero__card-justify__offset .hero--caption{grid-area:1/2/3/3}.hero__card-align__bottom.hero__card-justify__offset .hero--caption .hero--caption--wrapper,.hero__card-align__bottom.hero__card-justify__start .hero--caption .hero--caption--wrapper{background:#2d2d2d;height:27px;width:30px;display:flex;justify-content:center;align-items:center;position:absolute;left:0;right:auto;bottom:0}.hero__card-align__bottom.hero__card-justify__offset .hero--caption .hero--caption--wrapper:after,.hero__card-align__bottom.hero__card-justify__start .hero--caption .hero--caption--wrapper:after{content:"";position:absolute;top:0;width:0;height:0;border-top:27px solid transparent;left:100%;border-right:none;border-left:23px solid #2d2d2d}.hero--caption--wrapper{left:2px}[dir=rtl] .hero--caption--wrapper{background:#2d2d2d;height:27px;width:30px;display:flex;justify-content:center;align-items:center;right:0;position:absolute}[dir=rtl] .hero--caption--wrapper:after{content:"";position:absolute;top:0;width:0;height:0;border-top:27px solid transparent;left:auto;right:100%;border-left:none;border-right:23px solid #2d2d2d}[dir=rtl] .hero__card-align__bottom.hero__card-justify__offset .hero--caption--wrapper,[dir=rtl] .hero__card-align__bottom.hero__card-justify__start .hero--caption--wrapper{background:#2d2d2d;height:27px;width:30px;display:flex;justify-content:center;align-items:center;position:absolute;left:auto;right:0;bottom:0}[dir=rtl] .hero__card-align__bottom.hero__card-justify__offset .hero--caption--wrapper:after,[dir=rtl] .hero__card-align__bottom.hero__card-justify__start .hero--caption--wrapper:after{content:"";position:absolute;top:0;width:0;height:0;border-top:27px solid transparent;left:auto;right:100%;border-left:none;border-right:23px solid #2d2d2d}

package/dist/components/hero/hero.twig

@@ -0,0 +1,65 @@
+{# hero.twig #}
+
+{% set theme = theme|default(herocard.theme) %}
+{% set background = background|default(herocard.background) %}
+
+<div class="hero {% if gap %} hero__gap__{{ gap }} {% endif %} hero__card-justify__{{ justify }} hero__poster-size__{{ postersize }} hero__card-size__{{ cardsize }} hero__card-align__{{ align }} hero__card-theme__{{ theme }} hero__card-background__{{ background }}">
+	<figure class="hero--background">
+		{% block hero_image %}
+			{% if image %}
+				<picture class="hero--image">
+					{% for img in image.url|reverse %}
+						{% if loop.last == false  %}
+							{% if img.breakpoint matches '/^\\d+$/' %}
+								<source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+							{% else %}
+								<source srcset="{{img.src}}" media="{{img.breakpoint}}">
+							{% endif %}
+						{% endif %}
+					{% endfor %}
+					<img class="ilo--card--image" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
+				</picture>
+			{% endif %}
+		{% endblock %}
+	</figure>
+	{% if breadcrumb %}
+		<div class="hero--breadcrumbs">
+			<div class="hero--breadcrumbs--wrapper">
+				{% include "@components/breadcrumb/breadcrumb.twig" with {
+          home: breadcrumb.home,
+          links: breadcrumb.links,
+          prefix: prefix,
+        } only %}
+			</div>
+		</div>
+	{% endif %}
+	<div class="hero--card-offset"></div>
+	<div class="hero--card">
+		{% include "@components/herocard/herocard.twig" with {
+    url: herocard.url,
+    eyebrow: herocard.eyebrow,
+    cornercut: herocard.cornercut,
+    datecopy: herocard.datecopy,
+    intro: herocard.intro,
+    prefix: prefix,
+    socialmedia: herocard.socialmedia,
+    theme: theme,
+    background: background,
+    title: herocard.title,
+  } only %}
+	</div>
+	<div class="hero--caption">
+		{% if not caption %}
+			{% else %}
+				<div class="hero--caption--wrapper">
+					{% include '@components/tooltip/tooltip.twig' with {
+						prefix: prefix,
+						label: caption.label,
+						icon: "true",
+						theme: "dark",
+						icontheme: "dark"
+					} only %}
+				</div>
+		{% endif %}
+	</div>
+</div>

package/dist/components/hero/hero.wingsuit.yml

@@ -0,0 +1,182 @@
+hero:
+  use: "@components/hero/hero.twig"
+  namespace: Components/Content
+  label: Hero
+  description: The Hero is an attention-grabbing section of a web page designed to engage users and create a memorable first impression.
+  fields:
+    image:
+      label: Image
+      type: object
+      description: The image to display in the hero. The image will be cropped to fit the hero's aspect ratio.
+      preview:
+        alt: Lorem ipsum
+        loading: lazy
+        url:
+          - breakpoint: 0
+            src: "/images/hero.jpg"
+          - breakpoint: 768
+            src: "/images/hero.jpg"
+    breadcrumb:
+      label: Bread crumbs
+      description: The breadcrumb navigation to display in the hero.
+      type: object
+      preview:
+        home:
+          label: "Home"
+          url: "/"
+        links:
+          - label: "Link One"
+            url: "/linkone"
+          - label: "Link Two"
+            url: "/linktwo"
+          - label: "Link Three"
+            url: "/linkthree"
+          - label: "Link Four"
+            url: "/linkfour"
+          - label: "Link Five"
+            url: "/linkfive"
+          - label: "Link Six"
+            url: "/linksix"
+    herocard:
+      label: Hero Card
+      type: object
+      description: The hero card to display in the hero. See docs on the Hero Card component for more information about the fields.
+      preview:
+        title: "Child labour"
+        theme: "dark"
+        background: "solid"
+        cornercut: "true"
+        eyebrow: ILO Topics
+        socialmedia:
+          icons:
+            - label: "Facebook"
+              url: "https://www.facebook.com/ilo.org"
+              icon: "facebook"
+            - label: "Twitter"
+              url: "https://www.twitter.com/ilo.org"
+              icon: "twitter"
+            - label: "Linkedin"
+              url: "https://www.linkedin.com/company/international-labour-organization-ilo"
+              icon: "linkedin"
+    caption:
+      label: Caption
+      type: object
+      description: The credit and caption information about the image. Appears as a tooltip.
+      preview:
+        label: A metalurgy worker at a manufacturing plant in Viet Nam. © ILO/Minh Quang
+  settings:
+    gap:
+      label: Gap
+      description: The color of the gap between the bottom of the hero image and the bottom of the card if there is one. In practice, this is the background color of the entire Hero component which will usually only be visible in that space.
+      type: select
+      options:
+        transparent: transparent
+        white: white
+        light: light
+        dark: dark
+    justify:
+      label: Justify
+      description: Sets the horizontal alignment of the hero card. `start` is on the left in LTR layouts and on the right in RTL layouts.
+      type: select
+      options:
+        start: start
+        offset: offset
+        center: center
+      preview: "start"
+    align:
+      label: Align
+      description: Sets the vertical alignment of the hero card.
+      type: select
+      options:
+        baseline: baseline
+        center: center
+        bottom: bottom
+      preview: "baseline"
+    postersize:
+      label: Poster Size
+      description: Sets the size of the image poster.
+      type: select
+      options:
+        small: small
+        medium: medium
+        large: large
+        xlarge: xlarge
+      preview: large
+    cardsize:
+      label: Card Size
+      description: Sets the width of the hero card.
+      type: select
+      options:
+        small: small
+        medium: medium
+        large: large
+        xlarge: xlarge
+        xxlarge: xxlarge
+      preview: small
+    background:
+      type: select
+      label: Background
+      description: Should the background be solid, semi-transparent or transparent
+      options:
+        solid: solid
+        semi-transparent: semi-transparent
+        transparent: transparent
+      preview: "solid"
+    theme:
+      type: select
+      label: Theme
+      description: The theme of the hero card.
+      options:
+        light: light
+        dark: dark
+      preview: "dark"
+  variants:
+    default:
+      label: Default
+    homepage:
+      label: Homepage
+      description: The hero variant for the homepage.
+      settings:
+        align: "center"
+        justify: "start"
+        postersize: "large"
+        cardsize: "medium"
+      fields:
+        breadcrumb: null
+        herocard:
+          title: "ILO welcomes G7 call to make a just transition to a green economy happen"
+          url: "https://www.ilo.org"
+          theme: "dark"
+          background: "semi-transparent"
+          cornercut: false
+          eyebrow: UN General Assembly
+    article:
+      label: Article
+      settings:
+        align: "bottom"
+        justify: "center"
+        postersize: "xlarge"
+        cardsize: "large"
+      fields:
+        breadcrumb: null
+        herocard:
+          title: "When a woman becomes a boss in a man's world"
+          datecopy: "11 February 2021"
+          theme: "light"
+          background: "solid"
+          cornercut: "true"
+          eyebrow: Women in management
+          socialmedia:
+            icons:
+              - label: "Facebook"
+                url: "https://www.facebook.com/ilo.org"
+                icon: "facebook"
+              - label: "Twitter"
+                url: "https://www.twitter.com/ilo.org"
+                icon: "twitter"
+              - label: "Linkedin"
+                url: "https://www.linkedin.com/company/international-labour-organization-ilo"
+                icon: "linkedin"
+        caption:
+          label: A metalurgy worker at a manufacturing plant in Viet Nam. © ILO/Minh Quang
+  visibility: storybook

package/dist/components/herocard/herocard.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--hero-card{height:100%;position:relative;padding:40px 16px}@media screen and (min-width:1024px){.ilo--hero-card{padding-block:56px;padding-inline-end:71px;padding-inline-start:var(--card-padding-start)}}.ilo--hero-card--title-link{color:inherit;text-decoration:none}.ilo--hero-card--title-link:hover{text-decoration:underline}.ilo--hero-card__theme__light{color:#2d2d2d;background:#fff}@media screen and (min-width:1024px){.ilo--hero-card__theme__light.ilo--hero-card__background__semi-transparent{background:hsla(0,0%,100%,.6)}}.ilo--hero-card__theme__dark{background:#230050;color:#fff}@media screen and (min-width:1024px){.ilo--hero-card__theme__dark.ilo--hero-card__background__semi-transparent{background:rgba(35,0,80,.6)}}@media screen and (min-width:1024px){.ilo--hero-card__theme__dark.ilo--hero-card__background__transparent,.ilo--hero-card__theme__light.ilo--hero-card__background__transparent{color:#fff;background:0 0}.ilo--hero-card__theme__dark.ilo--hero-card__background__transparent *,.ilo--hero-card__theme__light.ilo--hero-card__background__transparent *{filter:drop-shadow(1px 1px 12px rgb(45,45,45))}}.ilo--hero-card__cornercut,[dir=rtl] .ilo--hero-card__cornercut{clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}[dir=rtl] .ilo--hero-card__cornercut{clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 40px)}@media screen and (min-width:1024px){.ilo--hero-card__cornercut,[dir=rtl] .ilo--hero-card__cornercut{clip-path:polygon(0 0,calc(100% - 116px) 0,100% 64px,100% 100%,0 100%)}[dir=rtl] .ilo--hero-card__cornercut{clip-path:polygon(116px 0,100% 0,100% 100%,0 100%,0 64px)}}.ilo--hero-card--datecopy{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.5005359057rem;color:#6d6d6d}.ilo--hero-card__theme__dark .ilo--hero-card--datecopy{color:#fff}.ilo--hero-card__theme__light .ilo--hero-card--datecopy{color:#6d6d6d}.ilo--hero-card__background__semi-transparent .ilo--hero-card--datecopy,.ilo--hero-card__background__transparent .ilo--hero-card--datecopy{color:#fff}.ilo--hero-card--eyebrow{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:.857449089rem;color:#960a55}.ilo--hero-card__theme__dark .ilo--hero-card--eyebrow{color:#fff}.ilo--hero-card__theme__light .ilo--hero-card--eyebrow{color:#960a55}.ilo--hero-card__background__transparent .ilo--hero-card--eyebrow{color:#fff}.ilo--hero-card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.5005359057rem}@media screen and (min-width:1024px){.ilo--hero-card--intro{font-size:18.66px;letter-spacing:normal;line-height:27.24px}}.ilo--hero-card--title{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px;margin-bottom:1.1117935901rem;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700}@media screen and (min-width:1024px){.ilo--hero-card--title{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}}

package/dist/components/herocard/herocard.twig

@@ -0,0 +1,30 @@
+{#
+  HEROCARD COMPONENT
+#}
+<div class="ilo--hero-card ilo--hero-card__theme__{{ theme }} ilo--hero-card__background__{{ background }} {% if cornercut == "true" %} ilo--hero-card__cornercut {% endif %}">
+  {% if eyebrow %}
+    <p class="{{ prefix }}--hero-card--eyebrow">{{ eyebrow }}</p>
+  {% endif %}
+  {% if title %}
+    {% if url %}
+      <a href={{ url }} class="{{ prefix }}--hero-card--title-link">
+        <h1 class="{{ prefix }}--hero-card--title">{{ title }}</h1>
+      </a>
+    {% else %}
+     <h1 class="{{ prefix }}--hero-card--title">{{ title }}</h2>
+    {% endif %}
+  {% endif %}
+  {% if intro %}
+    <p class="{{ prefix }}--hero-card--intro">{{ intro }}</p>
+  {% endif %}
+  {% if datecopy %}
+    <p class="{{ prefix }}--hero-card--datecopy">{{ datecopy }}</p>
+  {% endif %}
+  {% if socialmedia %}
+    {% include "@components/socialmedia/socialmedia.twig" with {
+      theme: theme,
+      align: "start",
+      icons: socialmedia.icons
+  } %}
+  {% endif %}
+</div>

package/dist/components/herocard/herocard.wingsuit.yml

@@ -0,0 +1,71 @@
+herocard:
+  namespace: Components/Content
+  use: "@components/herocard/herocard.twig"
+  label: Hero Card
+  description: The Hero Card includes the title, intro, date, and social links for the hero
+  id: herocard
+  settings:
+    theme:
+      type: select
+      label: Theme
+      description: The theme of the hero card.
+      options:
+        light: light
+        dark: dark
+      preview: "dark"
+    background:
+      type: select
+      label: Background
+      description: Should the background be solid, semi-transparent or transparent
+      options:
+        solid: solid
+        semi-transparent: semi-transparent
+        transparent: transparent
+      preview: "solid"
+    cornercut:
+      type: select
+      label: Cornercut
+      description: Whether the card show have its right or left corner cut
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "true"
+  fields:
+    url:
+      type: string
+      label: URL
+      description: Optional URL for the hero card. If provided, the title will be a link.
+      preview: null
+    datecopy:
+      type: string
+      label: Date copy
+      description: Date byline copy
+      preview: "11 February 2021"
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Copy for the eyebrow of the card
+      preview: "Gender equality"
+    intro:
+      type: string
+      label: Intro
+      description: Intro text for the hero
+      preview: "Over the last three decades, global supply chains have been a key entry point for women to enter the formal workforce."
+    socialmedia:
+      type: object
+      label: Social media links
+      description: The social links to include in the hero
+      preview:
+        icons:
+          - label: "Facebook"
+            url: "https://www.facebook.com/"
+            icon: "facebook"
+          - label: "Linkedin"
+            url: "https://www.linkedin.com/"
+            icon: "linkedin"
+    title:
+      type: string
+      label: Title
+      description: This is the title for the hero card
+      preview: "How to achieve gender equality in global garment supply chains"
+  visibility: storybook