@ilo-org/twig 1.8.0 → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/components/breadcrumb/breadcrumb.component.yml +10 -0
  2. package/dist/components/breadcrumb/breadcrumb.twig +3 -1
  3. package/dist/components/breadcrumb/breadcrumb.wingsuit.yml +10 -0
  4. package/dist/components/card_detail/card_detail.component.yml +9 -0
  5. package/dist/components/card_detail/card_detail.twig +5 -2
  6. package/dist/components/card_detail/card_detail.wingsuit.yml +9 -0
  7. package/dist/components/form/fieldset.twig +20 -12
  8. package/dist/components/form/form.component.yml +8 -0
  9. package/dist/components/form/form.twig +5 -2
  10. package/dist/components/form/form.wingsuit.yml +8 -0
  11. package/dist/components/form/formcontrol.twig +6 -2
  12. package/dist/components/logo/logo.component.yml +34 -0
  13. package/dist/components/logo/logo.twig +27 -0
  14. package/dist/components/logo/logo.wingsuit.yml +34 -0
  15. package/dist/components/nav/nav.component.yml +3 -0
  16. package/dist/components/nav/nav.wingsuit.yml +3 -0
  17. package/dist/components/nav/nav_compact.twig +8 -1
  18. package/dist/components/nav/nav_complex.twig +16 -2
  19. package/dist/components/pagination/pagination.component.yml +8 -0
  20. package/dist/components/pagination/pagination.twig +6 -5
  21. package/dist/components/pagination/pagination.wingsuit.yml +8 -0
  22. package/dist/components/richtext/richtext.component.yml +8 -0
  23. package/dist/components/richtext/richtext.twig +5 -4
  24. package/dist/components/richtext/richtext.wingsuit.yml +8 -0
  25. package/dist/styles/components/breadcrumb.css +1 -1
  26. package/dist/styles/components/card.css +1 -1
  27. package/dist/styles/components/datacard.css +1 -1
  28. package/dist/styles/components/detailcard.css +1 -1
  29. package/dist/styles/components/featurecard.css +1 -1
  30. package/dist/styles/components/fieldset.css +1 -1
  31. package/dist/styles/components/form.css +1 -1
  32. package/dist/styles/components/formcontrol.css +1 -1
  33. package/dist/styles/components/multilinkcard.css +1 -1
  34. package/dist/styles/components/pagination.css +1 -1
  35. package/dist/styles/components/richtext.css +1 -1
  36. package/dist/styles/global.css.map +1 -1
  37. package/dist/styles/index.css +2 -2
  38. package/dist/styles/index.css.map +1 -1
  39. package/dist/styles/monorepo.css +2 -2
  40. package/dist/styles/monorepo.css.map +1 -1
  41. package/package.json +4 -4
package/dist/components/breadcrumb/breadcrumb.component.yml CHANGED
@@ -3,6 +3,16 @@ breadcrumb:
3
3
  use: "@components/breadcrumb/breadcrumb.twig"
4
4
  label: Breadcrumb
5
5
  description: A component for displaying links in a "breadcrumb" ux
6
+ settings:
7
+ theme:
8
+ type: select
9
+ label: Theme
10
+ description: The theme of the breadcrumb
11
+ required: false
12
+ preview: light
13
+ options:
14
+ light: light
15
+ dark: dark
6
16
  fields:
7
17
  buttonlabel:
8
18
  type: string
package/dist/components/breadcrumb/breadcrumb.twig CHANGED
@@ -13,7 +13,9 @@
13
13
 
14
14
  {% set lastlink = links|last %}
15
15
 
16
- <nav class="ilo--breadcrumb {% if className %}{{className}}{% endif %}" data-prefix="ilo" data-loadcomponent="Breadcrumb">
16
+ {% set theme = theme|default("light") %}
17
+
18
+ <nav class="ilo--breadcrumb {% if className %}{{className}}{% endif %} ilo--breadcrumb__theme__{{theme}}" data-prefix="ilo" data-loadcomponent="Breadcrumb">
17
19
  <div class="ilo--breadcrumb--inner">
18
20
  <ol class="ilo--breadcrumb--items" id="ilo--breadcrumb--container">
19
21
  {# Render the first link on its own as a custom icon #}
package/dist/components/breadcrumb/breadcrumb.wingsuit.yml CHANGED
@@ -3,6 +3,16 @@ breadcrumb:
3
3
  use: "@components/breadcrumb/breadcrumb.twig"
4
4
  label: Breadcrumb
5
5
  description: A component for displaying links in a "breadcrumb" ux
6
+ settings:
7
+ theme:
8
+ type: select
9
+ label: Theme
10
+ description: The theme of the breadcrumb
11
+ required: false
12
+ preview: light
13
+ options:
14
+ light: light
15
+ dark: dark
6
16
  fields:
7
17
  buttonlabel:
8
18
  type: string
package/dist/components/card_detail/card_detail.component.yml CHANGED
@@ -54,6 +54,15 @@ detailcard:
54
54
  description: Title field for the card
55
55
  preview: Can digital technology be an equality machine?
56
56
  settings:
57
+ theme:
58
+ type: select
59
+ label: Theme
60
+ description: The theme of the card
61
+ required: false
62
+ preview: "light"
63
+ options:
64
+ light: "light"
65
+ dark: "dark"
57
66
  size:
58
67
  type: select
59
68
  label: size
package/dist/components/card_detail/card_detail.twig CHANGED
@@ -1,6 +1,9 @@
1
1
  {# card_detail.twig #}
2
2
 
3
- <div class="ilo--card ilo--card__type__detail ilo--card__size__{{size}} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} ilo--card__theme__light">
3
+ {% set theme = theme|default("light") %}
4
+ {% set iconColor = theme == "light" ? "var(--ilo-color-gray-charcoal)" : "var(--ilo-color-gray-light)" %}
5
+
6
+ <div class="ilo--card ilo--card__type__detail ilo--card__size__{{size}} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} ilo--card__theme__{{theme}}">
4
7
  <a class="ilo--card--link" href="{{link}}" title="{{title}}">
5
8
  <span class="ilo--card--link--text">{{title}}</span>
6
9
  </a>
@@ -32,7 +35,7 @@
32
35
  {% include "@components/icon/icon.twig" with {
33
36
  name: "triangle_right",
34
37
  size: 20,
35
- color: "var(--ilo-color-gray-charcoal)"
38
+ color: iconColor
36
39
  } %}
37
40
  {{dateExtra}}
38
41
  </p>
package/dist/components/card_detail/card_detail.wingsuit.yml CHANGED
@@ -54,6 +54,15 @@ detailcard:
54
54
  description: Title field for the card
55
55
  preview: Can digital technology be an equality machine?
56
56
  settings:
57
+ theme:
58
+ type: select
59
+ label: Theme
60
+ description: The theme of the card
61
+ required: false
62
+ preview: "light"
63
+ options:
64
+ light: "light"
65
+ dark: "dark"
57
66
  size:
58
67
  type: select
59
68
  label: size
package/dist/components/form/fieldset.twig CHANGED
@@ -1,13 +1,21 @@
1
1
  {# fieldset.twig #}
2
2
 
3
+ {% set theme = theme|default('light') %}
4
+
3
5
  {% set baseClass = 'ilo' ~ "--fieldset" %}
4
6
  {% set wrapClass = baseClass ~ "--wrap__" ~ wrap %}
5
7
  {% set directionClass = baseClass ~ "--direction__" ~ direction %}
6
8
  {% set helperClass = baseClass ~ "--helper" %}
7
9
  {% set errorClass = baseClass ~ "__error" %}
8
10
  {% set disabledClass = baseClass ~ "__disabled" %}
11
+ {% set themeClass = baseClass ~ "__theme__" ~ theme %}
12
+
13
+ {% set mergeFields = {
14
+ "prefix": prefix,
15
+ "theme": theme
16
+ } %}
9
17
 
10
- {% set fieldsetClasses = [fieldsetClass, baseClass, wrapClass, directionClass, class] %}
18
+ {% set fieldsetClasses = [fieldsetClass, baseClass, wrapClass, directionClass, themeClass, class] %}
11
19
  {% if disabled %}
12
20
  {% set fieldsetClasses = fieldsetClasses|merge([disabledClass]) %}
13
21
  {% endif %}
@@ -30,7 +38,8 @@
30
38
  {% include '@components/tooltip/tooltip.twig' with {
31
39
  "icon": true,
32
40
  "label": tooltip,
33
- "theme": "dark",
41
+ "icontheme": theme,
42
+ "theme": theme == "dark" ? "light" : "dark",
34
43
  "prefix": prefix,
35
44
  "tooltipId": tooltip
36
45
  } only %}
@@ -45,25 +54,24 @@
45
54
  <div class="{{ baseClass ~ '--elements' }}">
46
55
  {% for field in fields %}
47
56
  {% if field.type == "textinput" %}
48
- {% include "@components/textinput/textinput.twig" with field|merge({ "prefix": prefix }) only %}
57
+ {% include "@components/textinput/textinput.twig" with field|merge(mergeFields) only %}
49
58
  {% elseif field.type == "checkbox" %}
50
- {% include "@components/checkbox/checkbox.twig" with field|merge({ "prefix": prefix }) only %}
59
+ {% include "@components/checkbox/checkbox.twig" with field|merge(mergeFields) only %}
51
60
  {% elseif field.type == "datepicker" %}
52
- {% include "@components/datepicker/datepicker.twig" with field|merge({ "prefix": prefix }) only %}
61
+ {% include "@components/datepicker/datepicker.twig" with field|merge(mergeFields) only %}
53
62
  {% elseif field.type == "dropdown" %}
54
- {% include "@components/dropdown/dropdown.twig" with field|merge({ "prefix": prefix }) only %}
63
+ {% include "@components/dropdown/dropdown.twig" with field|merge(mergeFields) only %}
55
64
  {% elseif field.type == "fileupload" %}
56
- {% include "@components/fileupload/fileupload.twig" with field|merge({ "prefix": prefix }) only %}
65
+ {% include "@components/fileupload/fileupload.twig" with field|merge(mergeFields) only %}
57
66
  {% elseif field.type == "numberpicker" %}
58
- {% include "@components/numberpicker/numberpicker.twig" with field|merge({ "prefix": prefix }) only %}
67
+ {% include "@components/numberpicker/numberpicker.twig" with field|merge(mergeFields) only %}
59
68
  {% elseif field.type == "radio" %}
60
- {% include "@components/radio/radio.twig" with field|merge({ "prefix": prefix }) only %}
69
+ {% include "@components/radio/radio.twig" with field|merge(mergeFields) only %}
61
70
  {% elseif field.type == "search" %}
62
- {% include "@components/search/search.twig" with field|merge({ "prefix": prefix }) only %}
71
+ {% include "@components/search/search.twig" with field|merge(mergeFields) only %}
63
72
  {% elseif field.type == "textarea" %}
64
- {% include "@components/textarea/textarea.twig" with field|merge({ "prefix": prefix }) only %}
65
73
  {% elseif field.type == "toggle" %}
66
- {% include "@components/toggle/toggle.twig" with field|merge({ "prefix": prefix }) only %}
74
+ {% include "@components/toggle/toggle.twig" with field|merge(mergeFields) only %}
67
75
  {% endif %}
68
76
  {% endfor %}
69
77
  </div>
package/dist/components/form/form.component.yml CHANGED
@@ -4,6 +4,14 @@ form:
4
4
  label: Form
5
5
  description: The Form component provides users with a complete interface that combines all of the form elements in the design system together with a some configuration options for laying them out together.
6
6
  visibility: storybook
7
+ settings:
8
+ theme:
9
+ type: select
10
+ label: Theme
11
+ description: The theme of the form. Also sets the theme of the form's children. Defaults to `light`.
12
+ options:
13
+ light: light
14
+ dark: dark
7
15
  fields:
8
16
  headline:
9
17
  type: string
package/dist/components/form/form.twig CHANGED
@@ -1,15 +1,18 @@
1
1
  {# form.twig #}
2
2
 
3
+ {% set theme = theme|default('light') %}
4
+
3
5
  {% set baseClass = 'ilo' ~ "--form" %}
6
+ {% set themeClass = baseClass ~ "__theme__" ~ theme %}
4
7
 
5
- {% set formControlClass = [baseClass, class] %}
8
+ {% set formControlClass = [baseClass, themeClass, class] %}
6
9
 
7
10
  <form class="{{ formControlClass|join(' ') }}" data-loadcomponent="Form" {%- for key, value in attributes|default({} ) -%} {{- ' ' ~ key ~ '="' ~ value|e('html_attr') ~ '"' -}} {%- endfor -%}>
8
11
  {% if headline %}
9
12
  <h2>{{ headline }}</h2>
10
13
  {% endif %}
11
14
  {% for fieldset in fieldsets %}
12
- {% include "@components/form/fieldset.twig" with fieldset|merge({ "prefix": prefix }) only %}
15
+ {% include "@components/form/fieldset.twig" with fieldset|merge({ "prefix": prefix, "theme": theme }) only %}
13
16
  {% endfor %}
14
17
  {% if submit %}
15
18
  {% include "@components/button/button.twig" with submit|merge({
package/dist/components/form/form.wingsuit.yml CHANGED
@@ -4,6 +4,14 @@ form:
4
4
  label: Form
5
5
  description: The Form component provides users with a complete interface that combines all of the form elements in the design system together with a some configuration options for laying them out together.
6
6
  visibility: storybook
7
+ settings:
8
+ theme:
9
+ type: select
10
+ label: Theme
11
+ description: The theme of the form. Also sets the theme of the form's children. Defaults to `light`.
12
+ options:
13
+ light: light
14
+ dark: dark
7
15
  fields:
8
16
  headline:
9
17
  type: string
package/dist/components/form/formcontrol.twig CHANGED
@@ -59,7 +59,10 @@
59
59
  {% set showError = error and errorMessage %}
60
60
  {% set showHelper = not showError and helper %}
61
61
 
62
- <div class="{{ formControlClass|join(' ') }}" {% if style %} style="{{ style }}" {% endif %}>
62
+ {% set theme = theme|default("light") %}
63
+ {% set themeClass = baseClass ~ "__theme__" ~ theme %}
64
+
65
+ <div class="{{ formControlClass|join(' ') }} {{ themeClass }}" {% if style %} style="{{ style }}" {% endif %}>
63
66
  {% if label %}
64
67
  <span class="{{ labelClass|join(' ') }}">
65
68
  {% block label %}
@@ -69,7 +72,8 @@
69
72
  {% include '@components/tooltip/tooltip.twig' with {
70
73
  "icon": true,
71
74
  "label": tooltip,
72
- "theme": "dark",
75
+ "theme": "light",
76
+ "icontheme": "light",
73
77
  "prefix": prefix,
74
78
  "tooltipId": tooltipId
75
79
  } only %}
package/dist/components/logo/logo.component.yml ADDED
@@ -0,0 +1,34 @@
1
+ logo:
2
+ namespace: Components/Logo
3
+ use: "@components/logo/logo.twig"
4
+ label: Logo
5
+ description: A logo component that can optionally be wrapped in a link
6
+ fields:
7
+ src:
8
+ type: string
9
+ label: Image Source
10
+ description: The source URL of the logo image
11
+ preview: "images/logo_en_horizontal_blue_dark.svg"
12
+ alt:
13
+ type: string
14
+ label: Alt Text
15
+ description: Alternative text for the logo image
16
+ preview: "ILO Logo"
17
+ link:
18
+ type: object
19
+ label: Link
20
+ description: Optional link configuration for the logo
21
+ preview:
22
+ href: "https://www.ilo.org"
23
+ label: "ILO Live Homepage"
24
+ className:
25
+ type: string
26
+ label: Wrapper Class
27
+ description: CSS class for the logo wrapper element
28
+ preview: "ilo--logo"
29
+ imgClassName:
30
+ type: string
31
+ label: Image Class
32
+ description: CSS class for the logo image element
33
+ preview: "ilo--logo__img"
34
+ visibility: storybook
package/dist/components/logo/logo.twig ADDED
@@ -0,0 +1,27 @@
1
+ {# logo.twig #}
2
+
3
+ {% set prefix = prefix|default('ilo') %}
4
+ {% set base_class = className|default('ilo' ~ '--logo') %}
5
+ {% set img_class = imgClassName|default(base_class ~ '__img') %}
6
+
7
+ {% if link and link.href %}
8
+ <a
9
+ href="{{ link.href }}"
10
+ class="{{ base_class }} {{ base_class }}--link"
11
+ {% if link.label %}
12
+ aria-label="{{ link.label }}"
13
+ {% endif %}
14
+ >
15
+ <img
16
+ class="{{ img_class }}"
17
+ src="{{ src }}"
18
+ alt="{{ alt }}"
19
+ >
20
+ </a>
21
+ {% else %}
22
+ <img
23
+ class="{{ base_class }} {{ img_class }}"
24
+ src="{{ src }}"
25
+ alt="{{ alt }}"
26
+ >
27
+ {% endif %}
package/dist/components/logo/logo.wingsuit.yml ADDED
@@ -0,0 +1,34 @@
1
+ logo:
2
+ namespace: Components/Logo
3
+ use: "@components/logo/logo.twig"
4
+ label: Logo
5
+ description: A logo component that can optionally be wrapped in a link
6
+ fields:
7
+ src:
8
+ type: string
9
+ label: Image Source
10
+ description: The source URL of the logo image
11
+ preview: "images/logo_en_horizontal_blue_dark.svg"
12
+ alt:
13
+ type: string
14
+ label: Alt Text
15
+ description: Alternative text for the logo image
16
+ preview: "ILO Logo"
17
+ link:
18
+ type: object
19
+ label: Link
20
+ description: Optional link configuration for the logo
21
+ preview:
22
+ href: "https://www.ilo.org"
23
+ label: "ILO Live Homepage"
24
+ className:
25
+ type: string
26
+ label: Wrapper Class
27
+ description: CSS class for the logo wrapper element
28
+ preview: "ilo--logo"
29
+ imgClassName:
30
+ type: string
31
+ label: Image Class
32
+ description: CSS class for the logo image element
33
+ preview: "ilo--logo__img"
34
+ visibility: storybook
package/dist/components/nav/nav.component.yml CHANGED
@@ -15,6 +15,9 @@ nav:
15
15
  mobile: "images/ilo-live-logo-en-light.png"
16
16
  drawer: "images/ilo-live-logo-en-dark.png"
17
17
  alt: "ILO Logo"
18
+ link:
19
+ href: "https://live.ilo.org"
20
+ label: "ILO Live Homepage"
18
21
  tag:
19
22
  main: "Advancing social justice, promoting decent work"
20
23
  sub: "ILO is a specialized agency of the United Nations"
package/dist/components/nav/nav.wingsuit.yml CHANGED
@@ -15,6 +15,9 @@ nav:
15
15
  mobile: "images/ilo-live-logo-en-light.png"
16
16
  drawer: "images/ilo-live-logo-en-dark.png"
17
17
  alt: "ILO Logo"
18
+ link:
19
+ href: "https://live.ilo.org"
20
+ label: "ILO Live Homepage"
18
21
  tag:
19
22
  main: "Advancing social justice, promoting decent work"
20
23
  sub: "ILO is a specialized agency of the United Nations"
package/dist/components/nav/nav_compact.twig CHANGED
@@ -13,7 +13,14 @@
13
13
  tabindex="0"
14
14
  >
15
15
  <div class="{{ base_class }}__branding-logo">
16
- <img src="{{ branding.logo.mobile }}" alt="{{ branding.logo.alt }}">
16
+ {% include "@components/logo/logo.twig" with {
17
+ src: branding.logo.mobile,
18
+ alt: branding.logo.alt,
19
+ link: branding.logo.link,
20
+ className: base_class ~ '__branding-logo',
21
+ imgClassName: base_class ~ '__branding-logo-img',
22
+ prefix: prefix
23
+ } %}
17
24
  </div>
18
25
  </div>
19
26
 
package/dist/components/nav/nav_complex.twig CHANGED
@@ -35,7 +35,14 @@
35
35
  tabindex="0"
36
36
  aria-label="Branding"
37
37
  >
38
- <img class="{{ base_class }}__branding-main__logo-img" src="{{ branding.logo.main }}" alt="{{ branding.logo.alt }}">
38
+ {% include "@components/logo/logo.twig" with {
39
+ src: branding.logo.main,
40
+ alt: branding.logo.alt,
41
+ link: branding.logo.link,
42
+ className: base_class ~ '__branding-main__logo',
43
+ imgClassName: base_class ~ '__branding-main__logo-img',
44
+ prefix: prefix
45
+ } %}
39
46
  </div>
40
47
  </div>
41
48
  <div class="{{ base_class }}__branding-tag">
@@ -56,7 +63,14 @@
56
63
  tabindex="0"
57
64
  aria-label="Branding"
58
65
  >
59
- <img class="{{ base_class }}__nav-mobile__logo-img" src="{{ branding.logo.mobile }}" alt="{{ branding.logo.alt }}">
66
+ {% include "@components/logo/logo.twig" with {
67
+ src: branding.logo.mobile,
68
+ alt: branding.logo.alt,
69
+ link: branding.logo.link,
70
+ className: base_class ~ '__nav-mobile__logo',
71
+ imgClassName: base_class ~ '__nav-mobile__logo-img',
72
+ prefix: prefix
73
+ } %}
60
74
  </div>
61
75
  </div>
62
76
 
package/dist/components/pagination/pagination.component.yml CHANGED
@@ -3,6 +3,14 @@ pagination:
3
3
  use: "@components/pagination/pagination.twig"
4
4
  label: Pagination
5
5
  description: The Pagination component breaks content into pages for easier navigation with intuitive controls like 'Previous' and 'Next' buttons.
6
+ settings:
7
+ theme:
8
+ type: select
9
+ label: Theme
10
+ description: The theme of the pagination
11
+ options:
12
+ light: "light"
13
+ dark: "dark"
6
14
  fields:
7
15
  currentPage:
8
16
  type: number
package/dist/components/pagination/pagination.twig CHANGED
@@ -1,7 +1,8 @@
1
- {#
2
- PAGINATION COMPONENT
3
- #}
4
- <div class="ilo--pagination icon icon--{{type}}">
1
+ {# pagination.twig #}
2
+
3
+ {% set theme = theme|default("light") %}
4
+
5
+ <div class="ilo--pagination icon icon--{{type}} ilo--pagination__theme__{{theme}}">
5
6
  <div class="ilo--pagination--previous-set">
6
7
  <a
7
8
  class="ilo--pagination--first-page ilo--pagination--link {% if currentPage == 0 %}ilo--pagination--disable{% endif %}"
@@ -24,7 +25,7 @@
24
25
  {% set currentPageZeroIndex = currentPage * 1 %}
25
26
  {% set currentPageIndex = currentPageZeroIndex + 1 %}
26
27
 
27
- <span>{{currentPageIndex}}</span>
28
+ <span>{{currentPageIndex}}</span>
28
29
  <span>{{pageCountPreposition}}</span>
29
30
  <span>{{totalPages}}</span>
30
31
  </p>
package/dist/components/pagination/pagination.wingsuit.yml CHANGED
@@ -3,6 +3,14 @@ pagination:
3
3
  use: "@components/pagination/pagination.twig"
4
4
  label: Pagination
5
5
  description: The Pagination component breaks content into pages for easier navigation with intuitive controls like 'Previous' and 'Next' buttons.
6
+ settings:
7
+ theme:
8
+ type: select
9
+ label: Theme
10
+ description: The theme of the pagination
11
+ options:
12
+ light: "light"
13
+ dark: "dark"
6
14
  fields:
7
15
  currentPage:
8
16
  type: number
package/dist/components/richtext/richtext.component.yml CHANGED
@@ -10,4 +10,12 @@ richtext:
10
10
  description: HTML content
11
11
  preview: "<h1>International Labour Organization</h1><p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p><figure><img alt='placeholder image' class='right' src='/images/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure><h2>History and Mission</h2><p>The ILO was established in the aftermath of World War I, recognizing that lasting peace could only be achieved through social justice. Since then, the organization has been pivotal in setting international labor standards, promoting rights at work, encouraging decent employment opportunities, and enhancing social protection. Its tripartite structure brings together governments, employers, and workers from its member states to develop policies and programs.</p><p>Over the past century, the ILO has adapted to the evolving needs of the global workforce, addressing challenges such as child labor, forced labor, and gender inequality. Through its conventions and recommendations, the ILO has become a central force in shaping labor laws and practices that protect workers worldwide, fostering equitable and inclusive economic growth.</p><hr><h3>Key Milestones in ILO History</h3><ol><li>1919: ILO was founded as part of the Treaty of Versailles.</li><li>1946: ILO became the first specialized agency of the United Nations.</li><li>1969: ILO was awarded the Nobel Peace Prize.</li><li>2019: ILO celebrated its 100th anniversary.</li></ol><h4>ILO’s Mission</h4><ul><li>Promoting social justice and internationally recognized human and labor rights.</li><li>Developing labor standards and policies to improve working conditions globally.</li><li>Ensuring employment opportunities and social protection for all workers.</li></ul><h2>Watch: The Mission and Work of the ILO</h2><p>This video provides a visual overview of the ILO's mission, its historical impact, and its ongoing initiatives to improve working conditions and promote social justice across the world.</p><article class='responsive-video-embed'><iframe src='https://www.youtube.com/embed/55xQTgUJqhQ?si=zhNOlGG5SXWkB2TW' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe></article><blockquote><p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p><cite>ILO Director-General Gilbert F. Houngbo</cite></blockquote><p>Reflecting these ideas, the Preamble of the ILO Constitution states:</p><ol><li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li><li>And whereas conditions of labour exist involving such injustice, hardship, and privation to large numbers of people as to threaten the peace and harmony of the world.</li></ol>"
12
12
  required: true
13
+ settings:
14
+ theme:
15
+ type: select
16
+ label: Theme
17
+ description: The theme to be used for the RichText component.
18
+ options:
19
+ light: light
20
+ dark: dark
13
21
  visibility: storybook
package/dist/components/richtext/richtext.twig CHANGED
@@ -1,6 +1,7 @@
1
- {#
2
- RICH TEXT COMPONENT
3
- #}
4
- <div class="ilo--richtext">
1
+ {# richtext.twig #}
2
+
3
+ {% set theme = theme|default("light") %}
4
+
5
+ <div class="ilo--richtext ilo--richtext__theme__{{theme}}">
5
6
  {{content}}
6
7
  </div>
package/dist/components/richtext/richtext.wingsuit.yml CHANGED
@@ -10,4 +10,12 @@ richtext:
10
10
  description: HTML content
11
11
  preview: "<h1>International Labour Organization</h1><p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p><figure><img alt='placeholder image' class='right' src='/images/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure><h2>History and Mission</h2><p>The ILO was established in the aftermath of World War I, recognizing that lasting peace could only be achieved through social justice. Since then, the organization has been pivotal in setting international labor standards, promoting rights at work, encouraging decent employment opportunities, and enhancing social protection. Its tripartite structure brings together governments, employers, and workers from its member states to develop policies and programs.</p><p>Over the past century, the ILO has adapted to the evolving needs of the global workforce, addressing challenges such as child labor, forced labor, and gender inequality. Through its conventions and recommendations, the ILO has become a central force in shaping labor laws and practices that protect workers worldwide, fostering equitable and inclusive economic growth.</p><hr><h3>Key Milestones in ILO History</h3><ol><li>1919: ILO was founded as part of the Treaty of Versailles.</li><li>1946: ILO became the first specialized agency of the United Nations.</li><li>1969: ILO was awarded the Nobel Peace Prize.</li><li>2019: ILO celebrated its 100th anniversary.</li></ol><h4>ILO’s Mission</h4><ul><li>Promoting social justice and internationally recognized human and labor rights.</li><li>Developing labor standards and policies to improve working conditions globally.</li><li>Ensuring employment opportunities and social protection for all workers.</li></ul><h2>Watch: The Mission and Work of the ILO</h2><p>This video provides a visual overview of the ILO's mission, its historical impact, and its ongoing initiatives to improve working conditions and promote social justice across the world.</p><article class='responsive-video-embed'><iframe src='https://www.youtube.com/embed/55xQTgUJqhQ?si=zhNOlGG5SXWkB2TW' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe></article><blockquote><p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p><cite>ILO Director-General Gilbert F. Houngbo</cite></blockquote><p>Reflecting these ideas, the Preamble of the ILO Constitution states:</p><ol><li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li><li>And whereas conditions of labour exist involving such injustice, hardship, and privation to large numbers of people as to threaten the peace and harmony of the world.</li></ol>"
12
12
  required: true
13
+ settings:
14
+ theme:
15
+ type: select
16
+ label: Theme
17
+ description: The theme to be used for the RichText component.
18
+ options:
19
+ light: light
20
+ dark: dark
13
21
  visibility: storybook
package/dist/styles/components/breadcrumb.css CHANGED
@@ -1 +1 @@
1
- @keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--breadcrumb{position:relative;z-index:10}.ilo--breadcrumb--inner{background-color:var(--ilo-color-white);clip-path:polygon(0 0,100% 0,calc(100% - var(--ilo-spacing-base)*12) 100%,0 100%);display:inline-flex;padding-block:calc(var(--ilo-spacing-base)*4);padding-inline-end:calc(var(--ilo-spacing-base)*12);padding-inline-start:var(--breadcrumb-padding)}[dir=rtl] .ilo--breadcrumb--inner{clip-path:polygon(0 0,100% 0,100% 100%,calc(var(--ilo-spacing-base)*12) 100%)}.ilo--breadcrumb--context,.ilo--breadcrumb--items{align-items:center;display:inline-flex;justify-content:flex-start;list-style:none}.ilo--breadcrumb--context__collapse,.ilo--breadcrumb--item{padding-inline:calc(var(--ilo-spacing-base)*7) calc(var(--ilo-spacing-base)*1);position:relative}.ilo--breadcrumb--context__collapse:before,.ilo--breadcrumb--item:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23230050' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.884 3.116 17.768 12l-8.884 8.884-1.768-1.768L14.232 12 7.116 4.884z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:1.2861736334rem;content:"";height:1.2861736334rem;left:0;position:absolute;width:1.2861736334rem}[dir=rtl] .ilo--breadcrumb--context__collapse:before,[dir=rtl] .ilo--breadcrumb--item:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23230050' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m15.116 3.116 1.768 1.768L9.768 12l7.116 7.116-1.768 1.768L6.232 12z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;left:auto;right:0}.ilo--breadcrumb--context{position:relative}.ilo--breadcrumb--context--button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23230050' viewBox='0 0 24 24'%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:1.2861736334rem;border:none;display:none;height:1.2861736334rem;margin:0;padding:0;position:relative;width:1.2861736334rem}.ilo--breadcrumb--context--button:hover{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231E2DBE' viewBox='0 0 24 24'%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2'/%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer}.ilo--breadcrumb--context--menu{display:none;position:fixed;width:6.4308681672rem;z-index:10}.ilo--breadcrumb--context--menu__visible{display:inline-block}.ilo--breadcrumb--context__collapse{padding-inline:calc(var(--ilo-spacing-base)*6) 0}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--items{display:none}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--context--button{display:inline-block}.ilo--breadcrumb--item,.ilo--breadcrumb--item__first{align-items:center;display:flex}.ilo--breadcrumb--item__first{height:1.2861736334rem;padding-inline-start:2px;position:relative;width:1.2861736334rem}.ilo--breadcrumb--item__first:before{content:none}.ilo--breadcrumb--item__first:focus .ilo--breadcrumb--link:after,.ilo--breadcrumb--item__first:hover .ilo--breadcrumb--link:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231E2DBE' viewBox='0 0 24 24'%3E%3Cpath d='M4.35 20V10L12 4l7.65 6v10h-5.737v-5.5h-3.825V20z'/%3E%3C/svg%3E");background-repeat:no-repeat;height:1.2861736334rem;width:1.2861736334rem}.ilo--breadcrumb--item__first .ilo--breadcrumb--link{background:0 0;height:.857449089rem;position:relative;width:.857449089rem}.ilo--breadcrumb--item__first .ilo--breadcrumb--link:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23230050' viewBox='0 0 24 24'%3E%3Cpath d='M4.35 20V10L12 4l7.65 6v10h-5.737v-5.5h-3.825V20z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:1.2861736334rem;content:"";display:block;height:1.2861736334rem;left:0;top:0;width:1.2861736334rem}.ilo--breadcrumb--link{align-items:center;color:#230050;display:inline-flex;height:.857449089rem;padding-block:0;text-decoration:none}.ilo--breadcrumb--link--label{font-family:var(--ilo-fonts-copy);font-size:11.94px;font-weight:400;letter-spacing:normal;line-height:16.24px;max-width:30ch;overflow-x:clip;text-overflow:ellipsis;white-space:nowrap}.ilo--breadcrumb--link--label:focus,.ilo--breadcrumb--link--label:hover{color:#1e2dbe;text-decoration:underline;text-decoration-thickness:.1071811361rem;text-underline-offset:.2143622722rem}
1
+ @keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--breadcrumb{--ilo-breadcrumb-background-color:var(--ilo-color-white);--ilo-breadcrumb-link-color:var(--ilo-color-blue-dark);--ilo-breadcrumb-link-hover-color:var(--ilo-color-blue);position:relative;z-index:10}.ilo--breadcrumb__theme__dark{--ilo-breadcrumb-background-color:var(--ilo-color-blue-dark);--ilo-breadcrumb-link-color:var(--ilo-color-white);--ilo-breadcrumb-link-hover-color:var(--ilo-color-white)}.ilo--breadcrumb--inner{background-color:var(--ilo-breadcrumb-background-color);clip-path:polygon(0 0,100% 0,calc(100% - var(--ilo-spacing-base)*12) 100%,0 100%);display:inline-flex;padding-block:calc(var(--ilo-spacing-base)*4);padding-inline-end:calc(var(--ilo-spacing-base)*12);padding-inline-start:var(--breadcrumb-padding)}[dir=rtl] .ilo--breadcrumb--inner{clip-path:polygon(0 0,100% 0,100% 100%,calc(var(--ilo-spacing-base)*12) 100%)}.ilo--breadcrumb--context,.ilo--breadcrumb--items{align-items:center;display:inline-flex;justify-content:flex-start;list-style:none}.ilo--breadcrumb--context__collapse,.ilo--breadcrumb--item{padding-inline:calc(var(--ilo-spacing-base)*7) calc(var(--ilo-spacing-base)*1);position:relative}.ilo--breadcrumb--context__collapse:before,.ilo--breadcrumb--item:before{background-color:var(--ilo-breadcrumb-link-color);background-repeat:no-repeat;background-size:1.2861736334rem;content:"";height:1.2861736334rem;left:0;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.884 3.116 17.768 12l-8.884 8.884-1.768-1.768L14.232 12 7.116 4.884z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.884 3.116 17.768 12l-8.884 8.884-1.768-1.768L14.232 12 7.116 4.884z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;width:1.2861736334rem}[dir=rtl] .ilo--breadcrumb--context__collapse:before,[dir=rtl] .ilo--breadcrumb--item:before{background-color:var(--ilo-breadcrumb-link-color);left:auto;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m15.116 3.116 1.768 1.768L9.768 12l7.116 7.116-1.768 1.768L6.232 12z' clip-rule='evenodd'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='m15.116 3.116 1.768 1.768L9.768 12l7.116 7.116-1.768 1.768L6.232 12z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;right:0}.ilo--breadcrumb--context{position:relative}.ilo--breadcrumb--context--button{background-color:var(--ilo-breadcrumb-link-color);background-position:50%;background-repeat:no-repeat;background-size:1.2861736334rem;border:none;display:none;height:1.2861736334rem;margin:0;padding:0;position:relative;width:1.2861736334rem}.ilo--breadcrumb--context--button,.ilo--breadcrumb--context--button:hover{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.ilo--breadcrumb--context--button:hover{background-color:var(--ilo-breadcrumb-link-hover-color);cursor:pointer}.ilo--breadcrumb--context--menu{display:none;position:fixed;width:6.4308681672rem;z-index:10}.ilo--breadcrumb--context--menu__visible{display:inline-block}.ilo--breadcrumb--context__collapse{padding-inline:calc(var(--ilo-spacing-base)*6) 0}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--items{display:none}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--context--button{display:inline-block}.ilo--breadcrumb--item,.ilo--breadcrumb--item__first{align-items:center;display:flex}.ilo--breadcrumb--item__first{height:1.2861736334rem;padding-inline-start:2px;position:relative;width:1.2861736334rem}.ilo--breadcrumb--item__first:before{content:none}.ilo--breadcrumb--item__first .ilo--breadcrumb--link{height:24px;position:relative;width:24px}.ilo--breadcrumb--item__first .ilo--breadcrumb--link:focus:after,.ilo--breadcrumb--item__first .ilo--breadcrumb--link:hover:after{background-color:var(--ilo-breadcrumb-link-hover-color)}.ilo--breadcrumb--item__first .ilo--breadcrumb--link:after,.ilo--breadcrumb--item__first .ilo--breadcrumb--link:focus:after,.ilo--breadcrumb--item__first .ilo--breadcrumb--link:hover:after{mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M4.35 20V10L12 4l7.65 6v10h-5.737v-5.5h-3.825V20z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M4.35 20V10L12 4l7.65 6v10h-5.737v-5.5h-3.825V20z'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.ilo--breadcrumb--item__first .ilo--breadcrumb--link:after{background-color:var(--ilo-breadcrumb-link-color);content:"";display:block;height:24px;position:relative;width:24px}.ilo--breadcrumb--link{align-items:center;color:var(--ilo-breadcrumb-link-color);display:inline-flex;height:.857449089rem;padding-block:0;text-decoration:none}.ilo--breadcrumb--link--label{font-family:var(--ilo-fonts-copy);font-size:11.94px;font-weight:400;letter-spacing:normal;line-height:16.24px;max-width:30ch;overflow-x:clip;text-overflow:ellipsis;white-space:nowrap}.ilo--breadcrumb--link--label:focus,.ilo--breadcrumb--link--label:hover{color:var(--ilo-breadcrumb-link-hover-color);text-decoration:underline;text-decoration-thickness:.1071811361rem;text-underline-offset:.2143622722rem}
package/dist/styles/components/card.css CHANGED
@@ -1 +1 @@
1
- @keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--card{background-color:var(--ilo-color-white);box-sizing:border-box;flex:1 1 var(--max-width);max-width:var(--max-width);position:relative;transition-property:border-bottom,filter;transition-timing-function:ease-out}.ilo--card,.ilo--card *{transition-duration:.15s}.ilo--card *{transition-property:color,background-color,border-color,opacity,fill,filter;transition-timing-function:ease-out}.ilo--card:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04))}.ilo--card:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--image--wrapper:before{opacity:.4}.ilo--card:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--picture{filter:saturate(0)}.ilo--card--wrap{height:100%}.ilo--card--wrapper{max-width:var(--max-width);transition-duration:.15s;transition-property:color,background-color,border-color,opacity,fill,filter;transition-timing-function:ease-out}.ilo--card--wrapper:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04))}.ilo--card--image--wrapper{position:relative}.ilo--card--image--wrapper:before{background-color:var(--ilo-color-blue);content:"";opacity:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out;z-index:1}.ilo--card--image--wrapper:before,.ilo--card--link{height:100%;left:0;position:absolute;top:0;width:100%}.ilo--card--link{background:0 0;color:transparent;text-decoration:none;z-index:2}.ilo--card--link--text{border:0;height:1px;margin:-1px;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}.ilo--card--eyebrow{color:var(--ilo-color-purple);font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-sm);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-xlg);margin-bottom:calc(var(--ilo-spacing-base)*4)}.ilo--card--title{color:var(--ilo-color-blue-dark);font-family:var(--ilo-fonts-display);font-size:var(--ilo-font-size-lg);font-weight:var(--ilo-font-weight-bold);letter-spacing:var(--ilo-letter-spacing-sm);line-height:var(--ilo-line-height-lg);margin-bottom:calc(var(--ilo-spacing-base)*6)}.ilo--card--intro{color:var(--ilo-color-gray-charcoal);font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-md);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-2xlg)}.ilo--card--date{color:var(--ilo-gray-accessible);margin-bottom:calc(var(--ilo-spacing-base)*6)}.ilo--card--content--item,.ilo--card--date,.ilo--card--event-date{font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-sm);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-xlg)}.ilo--card--cta{position:relative;z-index:2}.ilo--card__theme__light{background:var(--ilo-color-white);border-bottom:.1607717042rem solid var(--ilo-color-gray-base)}.ilo--card__theme__soft{background:var(--ilo-color-blue-lighter)}.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within),.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){border-bottom:.1607717042rem solid var(--ilo-color-blue)}.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile{color:var(--ilo-color-blue)}.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile .ilo--icon{fill:var(--ilo-color-blue)}.ilo--card__theme__dark{background:var(--ilo-color-blue-dark);border-bottom:.1607717042rem solid var(--ilo-color-red)}.ilo--card__theme__dark:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){border-bottom:.1607717042rem solid var(--ilo-color-white)}.ilo--card__theme__dark .ilo--card--title{color:var(--ilo-color-white)}.ilo--card__theme__dark .ilo--card--content--item,.ilo--card__theme__dark .ilo--card--date,.ilo--card__theme__dark .ilo--card--eyebrow,.ilo--card__theme__dark .ilo--card--intro{color:var(--ilo-color-gray-light)}.ilo--card__theme__dark .ilo--card--content--item .ilo--icon{fill:var(--ilo-color-gray-light)}.ilo--card__size__fluid{--max-width:100%!important}.ilo--card__isvideo .ilo--card--image--wrapper{position:relative}.ilo--card__isvideo .ilo--card--image--wrapper:after,.ilo--card__isvideo .ilo--card--image--wrapper:before{background-position:50%;background-repeat:no-repeat;background-size:18px 20px;content:"";display:block;height:40px;left:0;position:absolute;top:0;width:40px;z-index:1}.ilo--card__isvideo .ilo--card--image--wrapper:before{background-color:var(--ilo-color-gray-charcoal)}.ilo--card__isvideo .ilo--card--image--wrapper:after{background-color:var(--ilo-color-gray-light);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M17 12 9 6v12z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M17 12 9 6v12z'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
1
+ @keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--card{background-color:var(--ilo-color-white);box-sizing:border-box;flex:1 1 var(--max-width);max-width:var(--max-width);position:relative;transition-property:border-bottom,filter;transition-timing-function:ease-out}.ilo--card,.ilo--card *{transition-duration:.15s}.ilo--card *{transition-property:color,background-color,border-color,opacity,fill,filter;transition-timing-function:ease-out}.ilo--card:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04))}.ilo--card:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--image--wrapper:before{opacity:.4}.ilo--card:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--picture{filter:saturate(0)}.ilo--card--wrap{height:100%}.ilo--card--wrapper{max-width:var(--max-width);transition-duration:.15s;transition-property:color,background-color,border-color,opacity,fill,filter;transition-timing-function:ease-out}.ilo--card--wrapper:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){filter:drop-shadow(0 -4px 16px rgba(30,45,190,.05)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 4px 8px rgba(30,45,190,.05)) drop-shadow(0 .8px 1.6px rgba(30,45,190,.04))}.ilo--card--image--wrapper{position:relative}.ilo--card--image--wrapper:before{background-color:var(--ilo-color-blue);content:"";opacity:0;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease-out;z-index:1}.ilo--card--image--wrapper:before,.ilo--card--link{height:100%;left:0;position:absolute;top:0;width:100%}.ilo--card--link{background:0 0;color:transparent;text-decoration:none;z-index:2}.ilo--card--link--text{border:0;height:1px;margin:-1px;padding:0;position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}.ilo--card--eyebrow{color:var(--ilo-color-purple);font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-sm);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-xlg);margin-bottom:calc(var(--ilo-spacing-base)*4)}.ilo--card--title{color:var(--ilo-color-blue-dark);font-family:var(--ilo-fonts-display);font-size:var(--ilo-font-size-lg);font-weight:var(--ilo-font-weight-bold);letter-spacing:var(--ilo-letter-spacing-sm);line-height:var(--ilo-line-height-lg);margin-bottom:calc(var(--ilo-spacing-base)*6)}.ilo--card--intro{color:var(--ilo-color-gray-charcoal);font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-md);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-2xlg)}.ilo--card--date{color:var(--ilo-gray-accessible);margin-bottom:calc(var(--ilo-spacing-base)*6)}.ilo--card--content--item,.ilo--card--date,.ilo--card--event-date{font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-sm);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-xlg)}.ilo--card--cta{position:relative;z-index:2}.ilo--card__theme__light{background:var(--ilo-color-white);border-bottom:.1607717042rem solid var(--ilo-color-gray-base)}.ilo--card__theme__soft{background:var(--ilo-color-blue-lighter)}.ilo--card__theme__light .ilo--card--date-extra,.ilo--card__theme__soft .ilo--card--date-extra{color:var(--ilo-color-gray-charcoal)}.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within),.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){border-bottom:.1607717042rem solid var(--ilo-color-blue)}.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile{color:var(--ilo-color-blue)}.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title .ilo--icon,.ilo--card__theme__light:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--content--item .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--date-extra .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--eyebrow .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--intro .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--card--title .ilo--icon,.ilo--card__theme__soft:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within) .ilo--profile .ilo--icon{fill:var(--ilo-color-blue)}.ilo--card__theme__dark{background:var(--ilo-color-blue-dark);border-bottom:.1607717042rem solid var(--ilo-color-red)}.ilo--card__theme__dark:has(.ilo--card--link:hover,.ilo--card--link:focus,.ilo--card--link:focus-within){border-bottom:.1607717042rem solid var(--ilo-color-white)}.ilo--card__theme__dark .ilo--card--title{color:var(--ilo-color-white)}.ilo--card__theme__dark .ilo--card--content--item,.ilo--card__theme__dark .ilo--card--date,.ilo--card__theme__dark .ilo--card--date-extra,.ilo--card__theme__dark .ilo--card--eyebrow,.ilo--card__theme__dark .ilo--card--intro{color:var(--ilo-color-gray-light)}.ilo--card__theme__dark .ilo--card--content--item .ilo--icon{fill:var(--ilo-color-gray-light)}.ilo--card__size__fluid{--max-width:100%!important}.ilo--card__isvideo .ilo--card--image--wrapper{position:relative}.ilo--card__isvideo .ilo--card--image--wrapper:after,.ilo--card__isvideo .ilo--card--image--wrapper:before{background-position:50%;background-repeat:no-repeat;background-size:18px 20px;content:"";display:block;height:40px;left:0;position:absolute;top:0;width:40px;z-index:1}.ilo--card__isvideo .ilo--card--image--wrapper:before{background-color:var(--ilo-color-gray-charcoal)}.ilo--card__isvideo .ilo--card--image--wrapper:after{background-color:var(--ilo-color-gray-light);mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M17 12 9 6v12z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M17 12 9 6v12z'/%3E%3C/svg%3E");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
package/dist/styles/components/datacard.css CHANGED
@@ -1 +1 @@
1
- @keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--card__type__data{--max-width:32.154340836rem;background:#ebf5fd;border-bottom:.1607717042rem solid #bedcfa;padding:calc(var(--ilo-spacing-base)*12) calc(var(--ilo-spacing-base)*10) calc(var(--ilo-spacing-base)*14);position:relative;width:100%}.ilo--card__type__data--content-links-list{display:flex;flex-wrap:wrap}.ilo--card__type__data--content-link.ilo--link{margin-bottom:0!important}.ilo--card__type__data .ilo--card--content{display:grid;grid-template-columns:1fr;grid-template-rows:auto;row-gap:1.3933547696rem}@media screen and (min-width:610px){.ilo--card__type__data{padding:calc(var(--ilo-spacing-base)*12)}.ilo--card__type__data__columns__two .ilo--card--content{column-gap:14%;grid-template-columns:minmax(10.718113612rem,32%) minmax(53%,1fr)}.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--image{grid-column:1/2;grid-row:1/span 4}.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--content,.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--cta,.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--files,.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--links{grid-column:2/3}.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--content,.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--files{grid-column:1/2}.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--cta{grid-column:1/2/3/3}.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--links{grid-area:1/2/3/3}}.ilo--card__type__data.ilo--card__size__narrow{--max-width:16.1307609861rem;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%);padding:calc(var(--ilo-spacing-base)*10) calc(var(--ilo-spacing-base)*6) calc(var(--ilo-spacing-base)*14)}@media screen and (max-width:609px){.ilo--card__type__data.ilo--card__size__narrow{--max-width:100%}}.ilo--card__type__data.ilo--card__size__wide{--max-width:41.6934619507rem}.ilo--card__type__data.ilo--card__size__wide.ilo--card__type__data__columns__one{padding:calc(var(--ilo-spacing-base)*12) calc(var(--ilo-spacing-base)*10) calc(var(--ilo-spacing-base)*14)}.ilo--card__type__data.ilo--card__size__wide.ilo--card__type__data__columns__two{padding:calc(var(--ilo-spacing-base)*12) calc(var(--ilo-spacing-base)*12) calc(var(--ilo-spacing-base)*14) calc(var(--ilo-spacing-base)*28)}.ilo--card__type__data.ilo--card__size__fluid,.ilo--card__type__data.ilo--card__size__wide{clip-path:polygon(0 0,calc(100% - 86px) 0,100% 48px,100% 100%,0 100%)}.ilo--card__type__data .ilo--card--image{max-width:200px;width:100%}.ilo--card__type__data .ilo--card--picture{max-width:100%;width:100%}.ilo--card__type__data--content-label{color:#6d6d6d;font-size:14.93px;letter-spacing:normal;line-height:20.3px;margin-bottom:.4932760997rem}.ilo--card__type__data .ilo--card--eyebrow{margin:0 0 .857449089rem}.ilo--card__type__data--content-copy{color:#2d2d2d;font-family:var(--ilo-fonts-display);font-size:23.32px;font-weight:500;letter-spacing:-.035em;line-height:29.15px}.ilo--card__type__data [class*=ilo--link]{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px;line-height:1.8;margin-inline-end:.6430868167rem;margin-bottom:.6430868167rem}.ilo--card__type__data [class*=button]{margin:.2143622722rem .4287245445rem .2143622722rem 0}.ilo--card__type__data [class*=button]:last-of-type{margin-right:0}
1
+ @keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--card__type__data{--max-width:32.154340836rem;background:var(--ilo-color-blue-lighter);border-bottom:.1607717042rem solid var(--ilo-color-blue-light);padding:calc(var(--ilo-spacing-base)*12) calc(var(--ilo-spacing-base)*10) calc(var(--ilo-spacing-base)*14);position:relative;width:100%}.ilo--card__type__data--content-links-list{display:flex;flex-wrap:wrap}.ilo--card__type__data--content-link.ilo--link{margin-bottom:0!important}.ilo--card__type__data .ilo--card--content{display:grid;grid-template-columns:1fr;grid-template-rows:auto;row-gap:1.3933547696rem}@media screen and (min-width:610px){.ilo--card__type__data{padding:calc(var(--ilo-spacing-base)*12)}.ilo--card__type__data__columns__two .ilo--card--content{column-gap:14%;grid-template-columns:minmax(10.718113612rem,32%) minmax(53%,1fr)}.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--image{grid-column:1/2;grid-row:1/span 4}.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--content,.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--cta,.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--files,.ilo--card__type__data__columns__two .ilo--card--content__with-image .ilo--card--area--links{grid-column:2/3}.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--content,.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--files{grid-column:1/2}.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--cta{grid-column:1/2/3/3}.ilo--card__type__data__columns__two .ilo--card--content__no-image-with-links .ilo--card--area--links{grid-area:1/2/3/3}}.ilo--card__type__data.ilo--card__size__narrow{--max-width:16.1307609861rem;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%);padding:calc(var(--ilo-spacing-base)*10) calc(var(--ilo-spacing-base)*6) calc(var(--ilo-spacing-base)*14)}@media screen and (max-width:609px){.ilo--card__type__data.ilo--card__size__narrow{--max-width:100%}}.ilo--card__type__data.ilo--card__size__wide{--max-width:41.6934619507rem}.ilo--card__type__data.ilo--card__size__wide.ilo--card__type__data__columns__one{padding:calc(var(--ilo-spacing-base)*12) calc(var(--ilo-spacing-base)*10) calc(var(--ilo-spacing-base)*14)}.ilo--card__type__data.ilo--card__size__wide.ilo--card__type__data__columns__two{padding:calc(var(--ilo-spacing-base)*12) calc(var(--ilo-spacing-base)*12) calc(var(--ilo-spacing-base)*14) calc(var(--ilo-spacing-base)*28)}.ilo--card__type__data.ilo--card__size__fluid,.ilo--card__type__data.ilo--card__size__wide{clip-path:polygon(0 0,calc(100% - 86px) 0,100% 48px,100% 100%,0 100%)}.ilo--card__type__data .ilo--card--image{max-width:200px;width:100%}.ilo--card__type__data .ilo--card--picture{max-width:100%;width:100%}.ilo--card__type__data--content-label{color:var(--ilo-color-gray-accessible);font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-sm);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-xlg);margin-block-end:calc(var(--ilo-spacing-base)*2)}.ilo--card__type__data .ilo--card--eyebrow{margin:0 0 .857449089rem}.ilo--card__type__data--content-copy{color:var(--ilo-color-gray-charcoal);font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-lg);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-2xlg)}@media screen and (min-width:610px){.ilo--card__size__fluid .ilo--card__type__data--content-copy,.ilo--card__size__wide .ilo--card__type__data--content-copy{font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-xlg);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-2xlg)}}.ilo--card__type__data [class*=ilo--link]{font-family:var(--ilo-fonts-copy);font-size:var(--ilo-font-size-lg);font-weight:var(--ilo-font-weight-regular);letter-spacing:var(--ilo-letter-spacing-md);line-height:var(--ilo-line-height-2xlg);line-height:1.8;margin-inline-end:.6430868167rem;margin-bottom:.6430868167rem}.ilo--card__type__data [class*=button]{margin:.2143622722rem .4287245445rem .2143622722rem 0}.ilo--card__type__data [class*=button]:last-of-type{margin-right:0}