diff --git a/src/components.d.ts b/src/components.d.ts
index 05350742cc948f06de03393d43274cde309d1971..61b2d9fb39f94d71d5738f5efa0ecfbc228ce563 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -356,6 +356,10 @@ export namespace Components {
stepState: ProcessFlowBoxStepStates;
variant: ProcessFlowBoxVariants;
}
+ interface HyProminentImage {
+ imageUrl?: string;
+ textTitle?: string;
+ }
interface HyRow {
/**
* justify-content property.
@@ -628,6 +632,11 @@ declare global {
prototype: HTMLHyProcessFlowBoxElement;
new (): HTMLHyProcessFlowBoxElement;
};
+ interface HTMLHyProminentImageElement extends Components.HyProminentImage, HTMLStencilElement {}
+ var HTMLHyProminentImageElement: {
+ prototype: HTMLHyProminentImageElement;
+ new (): HTMLHyProminentImageElement;
+ };
interface HTMLHyRowElement extends Components.HyRow, HTMLStencilElement {}
var HTMLHyRowElement: {
prototype: HTMLHyRowElement;
@@ -727,6 +736,7 @@ declare global {
'hy-paragraph-text': HTMLHyParagraphTextElement;
'hy-process': HTMLHyProcessElement;
'hy-process-flow-box': HTMLHyProcessFlowBoxElement;
+ 'hy-prominent-image': HTMLHyProminentImageElement;
'hy-row': HTMLHyRowElement;
'hy-section-container': HTMLHySectionContainerElement;
'hy-shortcuts': HTMLHyShortcutsElement;
@@ -1066,6 +1076,10 @@ declare namespace LocalJSX {
stepState?: ProcessFlowBoxStepStates;
variant?: ProcessFlowBoxVariants;
}
+ interface HyProminentImage {
+ imageUrl?: string;
+ textTitle?: string;
+ }
interface HyRow {
/**
* justify-content property.
@@ -1165,6 +1179,7 @@ declare namespace LocalJSX {
'hy-paragraph-text': HyParagraphText;
'hy-process': HyProcess;
'hy-process-flow-box': HyProcessFlowBox;
+ 'hy-prominent-image': HyProminentImage;
'hy-row': HyRow;
'hy-section-container': HySectionContainer;
'hy-shortcuts': HyShortcuts;
@@ -1229,6 +1244,7 @@ declare module '@stencil/core' {
'hy-paragraph-text': LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>;
'hy-process': LocalJSX.HyProcess & JSXBase.HTMLAttributes<HTMLHyProcessElement>;
'hy-process-flow-box': LocalJSX.HyProcessFlowBox & JSXBase.HTMLAttributes<HTMLHyProcessFlowBoxElement>;
+ 'hy-prominent-image': LocalJSX.HyProminentImage & JSXBase.HTMLAttributes<HTMLHyProminentImageElement>;
'hy-row': LocalJSX.HyRow & JSXBase.HTMLAttributes<HTMLHyRowElement>;
'hy-section-container': LocalJSX.HySectionContainer & JSXBase.HTMLAttributes<HTMLHySectionContainerElement>;
'hy-shortcuts': LocalJSX.HyShortcuts & JSXBase.HTMLAttributes<HTMLHyShortcutsElement>;
diff --git a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
index bf2aa0eb0c5634d3c87a28a7758ae5049732e2d2..42aa09b56d202a1e5d3a0056aa9405416801ec0b 100644
--- a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
+++ b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
@@ -4,29 +4,19 @@
.with-sidebar {
.hy-main-content-wrapper {
- margin: 0 auto;
// Layout Mobile 320-479px
- max-width: 22.5rem; // 328px
+ margin: 0 auto;
+ max-width: 100%;
padding: 0 1rem;
position: relative;
// Layout Tablet 480-959px
+ // Side navigation disappears to hamburger when width < 1200.
@include breakpoint($narrow) {
- max-width: 48rem; // 704px
+ // the rule is applied to screens >=480px: width 100% - side margins (32px)
padding: 0 2rem;
}
- // Layout Small Desktop 960-1200px
- // Side navigation disappears to hamburger when width < 1200.
- @include breakpoint($wide) {
- max-width: 64rem; // 960px
- }
-
- // > 1200px
- @include breakpoint($extrawide) {
- max-width: 64rem; // 960px
- }
-
// Large desktop Layout >1441px
@include breakpoint($overwide) {
max-width: 80rem; // 1216px + (32px + 32px side margins)
@@ -36,28 +26,17 @@
.without-sidebar {
.hy-main-content-wrapper {
- margin: 0 auto;
// Layout Mobile 320-479px
- max-width: 22.5rem; // 328px + (16px + 16px side margins)
+ margin: 0 auto;
+ max-width: 100%;
padding: 0 1rem;
position: relative;
// Layout Tablet 480-959px
@include breakpoint($narrow) {
- max-width: 48rem; // 704px + (32px + 32px side margins)
padding: 0 2rem;
}
- // Layout Small Desktop 960-1200px
- @include breakpoint($wide) {
- max-width: 64rem; // 960px + (32px + 32px side margins)
- }
-
- // > 1200px
- @include breakpoint($extrawide) {
- max-width: 80rem; // 1216px + (32px + 32px side margins)
- }
-
// Large desktop Layout >1441px
@include breakpoint($overwide) {
max-width: 94rem; // 1440px + (32px + 32px side margins)
diff --git a/src/components/hy-main/hy-main.scss b/src/components/hy-main/hy-main.scss
index aa78774a44f4ddae1200d227f9a8adcfe2b625c1..d4563441f5704031f5f79a624dc62ec53a8a86b4 100644
--- a/src/components/hy-main/hy-main.scss
+++ b/src/components/hy-main/hy-main.scss
@@ -2,15 +2,11 @@
display: flex;
margin: var(--gutter-mobile) auto;
max-width: $fullhd;
- padding: 0 var(--gutter-mobile) var(--gutter-mobile);
+ padding: 0;
width: 100%;
- @include breakpoint($medium) {
- padding: var(--gutter-mobile) 0;
- }
-
.layout-content {
- padding: var(--gutter-mobile) var(--gutter-medium);
+ padding: 0;
width: 100%;
}
@@ -26,17 +22,17 @@
&.with-sidebar {
.layout-content {
@include breakpoint($medium) {
- //padding: var(--gutter-mobile) var(--gutter-medium);
margin: 0 auto;
- padding: var(--gutter-medium);
width: 100%;
}
@include breakpoint($extrawide) {
margin: 0;
order: 2;
- padding: var(--gutter-extrawide);
width: 80%;
}
+ @include breakpoint($overwide) {
+ padding: 0 2rem;
+ }
}
.layout-sidebar-first {
@@ -53,6 +49,11 @@
&.without-sidebar {
.layout-content {
width: 100%;
+
+ padding: 0;
+ @include breakpoint($overwide) {
+ padding: 0 2rem;
+ }
}
}
}
diff --git a/src/components/hy-prominent-image/hy-prominent-image.scss b/src/components/hy-prominent-image/hy-prominent-image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f38955a23baa999af29728c2acb4ce37039eaa9a
--- /dev/null
+++ b/src/components/hy-prominent-image/hy-prominent-image.scss
@@ -0,0 +1,56 @@
+:host {
+ display: block;
+}
+
+.hy-prominent-image {
+ position: relative;
+
+ &__text {
+ // font: h5 small size
+ @include font-size(16px, 20px);
+ background-color: var(--grayscale-black);
+ bottom: 12px;
+ color: var(--grayscale-white);
+ font-family: var(--main-font-family);
+ font-weight: bold;
+ left: -8px;
+ letter-spacing: -0.5px;
+ max-width: 46%; // 5.5 columns
+ padding: 6px 12px;
+ position: absolute;
+ text-transform: uppercase;
+
+ @include breakpoint($narrow) {
+ // >=480px
+ // font: h4 small size
+ @include font-size(18px, 24px);
+ bottom: 20px;
+ left: -16px;
+ letter-spacing: -0.56px;
+ max-width: 58%; // 7 columns
+ padding: 12px 24px;
+ position: absolute;
+ }
+
+ @include breakpoint($wide) {
+ // Applies both to 960px-1200px and 1201-1440px
+ // font: h4 medium size
+ @include font-size(22px, 28px);
+ bottom: 24px;
+ left: -16px;
+ letter-spacing: -0.69px;
+ padding: 16px 24px;
+ position: absolute;
+ }
+ @include breakpoint($overwide) {
+ // >= 1441px
+ // font: h3 medium size
+ @include font-size(26px, 32px);
+ bottom: 28px;
+ left: -16px;
+ letter-spacing: -0.8px;
+ padding: 20px 24px;
+ position: absolute;
+ }
+ }
+}
diff --git a/src/components/hy-prominent-image/hy-prominent-image.tsx b/src/components/hy-prominent-image/hy-prominent-image.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b0b945917b4bedd5b234c843c67d0fea3a275c5f
--- /dev/null
+++ b/src/components/hy-prominent-image/hy-prominent-image.tsx
@@ -0,0 +1,24 @@
+import {Component, Host, h, Prop} from '@stencil/core';
+
+@Component({
+ tag: 'hy-prominent-image',
+ styleUrl: 'hy-prominent-image.scss',
+ shadow: true,
+})
+export class HyProminentImage {
+ @Prop() textTitle?: string;
+ @Prop() imageUrl?: string;
+
+ render() {
+ return (
+ <Host>
+ <div class="hy-prominent-image">
+ <div class="hy-prominent-image__image">
+ <hy-image image-url={this.imageUrl} aspectRatioWidth={2} aspectRatioHeight={1} />
+ </div>
+ {this.textTitle && <div class="hy-prominent-image__text">{this.textTitle}</div>}
+ </div>
+ </Host>
+ );
+ }
+}
diff --git a/src/components/hy-prominent-image/readme.md b/src/components/hy-prominent-image/readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..1f050f149e308c359280c72cd0f44b7075a878aa
--- /dev/null
+++ b/src/components/hy-prominent-image/readme.md
@@ -0,0 +1,28 @@
+# hy-prominent-image
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------- | ------------ | ----------- | -------- | ----------- |
+| `imageUrl` | `image-url` | | `string` | `undefined` |
+| `textTitle` | `text-title` | | `string` | `undefined` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-image](../image)
+
+### Graph
+
+```mermaid
+graph TD;
+ hy-prominent-image --> hy-image
+ style hy-prominent-image fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System
diff --git a/src/components/image/readme.md b/src/components/image/readme.md
index 5e3aca605c385108db79f05e58388f7bad5ab5f1..e1e51c7f4b8fa7c263ab8790db0225b71f536e07 100644
--- a/src/components/image/readme.md
+++ b/src/components/image/readme.md
@@ -39,12 +39,14 @@ Defaults to 16/9 aspect ratio if none is provided. Caption is optional.
### Used by
- [hy-introduction](../hy-introduction)
+- [hy-prominent-image](../hy-prominent-image)
### Graph
```mermaid
graph TD;
hy-introduction --> hy-image
+ hy-prominent-image --> hy-image
style hy-image fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/global/_breakpoints.scss b/src/global/_breakpoints.scss
index 231510a1061a4a18076d3151e4b392e98f1ecb54..176840554fc6799beef7b2af651ed40e4da3b1e3 100644
--- a/src/global/_breakpoints.scss
+++ b/src/global/_breakpoints.scss
@@ -1,16 +1,16 @@
:root {
- --breakpoint-extrawide: 75rem; // 1200px
- --breakpoint-max-width: 75rem; // 1200px
+ --breakpoint-extrawide: 75.0625rem; // 1201px
+ --breakpoint-max-width: 75.0625rem; // 1201px
--breakpoint-medium: 48rem; // 768px
--breakpoint-narrow: 30rem; // 480px
- --breakpoint-overwide: 90rem; // 1440px
+ --breakpoint-overwide: 90.0625rem; // 1441px
--breakpoint-wide: 60rem; // 960px
}
-$narrow: 30em; // 480px
-$medium: 48em; // 768px
-$wide: 60em; // 960px
-$extrawide: 75em; // 1200px
-$overwide: 90.0625rem; // 1441px
+$narrow: 30em; // 480px 480-767
+$medium: 48em; // 768px 768-959
+$wide: 60em; // 960px 960-1200 //small desktop
+$extrawide: 75.0625em; // 1201px //mid-size desktop full width lauout
+$overwide: 90.0625rem; // >=1441px
$fullhd: 120em; // 1920px
$max-width: $overwide;
diff --git a/src/index.html b/src/index.html
index 78b8c652c071fdd0300efce43f65115d0e2c2add..a3b571872bf884839fa3d77915a2241a914d34b1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,172 +14,93 @@
<hy-main has-sidebar="false">
<div class="layout-content">
<hy-main-content-wrapper>
- <hy-heading heading="h2" section="contentsection">
- Tabs, ohh so many tabs
- </hy-heading>
- <hy-tabs tab-id="example-tabs-1">
- <hy-tabs-item tab-title="Tab with text content">
- <hy-paragraph-text>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget enim interdum
- rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus
- pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada
- ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem condimentum,
- hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac lectus ex. Nam
- sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac habitasse platea
- dictumst.
- </hy-paragraph-text>
- </hy-tabs-item>
- <hy-tabs-item tab-title="For partner universities">Tab Content</hy-tabs-item>
- <hy-tabs-item tab-title="For foundations">Tab Content TWO Here Tab Content TWO Here</hy-tabs-item>
- <hy-tabs-item tab-title="For alumni">
- <hy-accordion-container accordionId="example-accordion">
- <hy-accordion-item accordiontitle="This is a accordion item 1">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is a accordion item 2">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is a accordion item 3">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- </hy-accordion-container>
- </hy-tabs-item>
- <hy-tabs-item tab-title="Support us">Tab Content FOUR Here</hy-tabs-item>
- <hy-tabs-item tab-title="Contact us">
- <hy-introduction
- variant="blue"
- text-title="This is an introduction"
- text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
- ></hy-introduction>
- </hy-tabs-item>
- <hy-tabs-item tab-title="One more">
- <hy-paragraph-text>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget enim interdum
- rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus
- pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada
- ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem condimentum,
- hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac lectus ex. Nam
- sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac habitasse platea
- dictumst.
- </hy-paragraph-text>
- <hy-paragraph-text>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget enim interdum
- rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus
- pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada
- ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem condimentum,
- hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac lectus ex. Nam
- sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac habitasse platea
- dictumst.
- </hy-paragraph-text>
- </hy-tabs-item>
- <hy-tabs-item tab-title="Tab with text content 7">
- <hy-paragraph-text>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget enim interdum
- rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus
- pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada
- ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem condimentum,
- hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac lectus ex. Nam
- sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac habitasse platea
- dictumst.
- </hy-paragraph-text>
- <hy-adjacent-image-text
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/coronavirus_1920x1080px_4.jpg?itok=dOgb6pfs"
- text-title="Text title 2"
- text-description="Text description Lorem ipsum dolor sit amet, consectetur adipiscing elit."
- main-url="https://www.google.com"
- main-url-title="Standalone link"
- main-url-aria-label="Standalone link internal"
- main-url-is-external="false"
- main-url-2="https://www.google.com"
- main-url-title-2="CTA standalone URL example"
- main-url-aria-label-2=""
- main-url-is-external-2="false"
- >
- </hy-adjacent-image-text>
- </hy-tabs-item>
- <hy-tabs-item tab-title="Just a tab">
- <hy-heading heading="h2">This is another heading</hy-heading>
- <hy-paragraph-text>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget enim interdum
- rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus
- pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada
- ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem condimentum,
- hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac lectus ex. Nam
- sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac habitasse platea
- dictumst.
- </hy-paragraph-text>
- </hy-tabs-item>
- <hy-tabs-item tab-title="Tab with text content last one">
- <hy-heading heading="h3">This is a heading</hy-heading>
- <hy-paragraph-text>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget enim interdum
- rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit tempus
- pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum malesuada
- ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem condimentum,
- hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac lectus ex. Nam
- sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac habitasse platea
- dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget
- enim interdum rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit
- tempus pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum
- malesuada ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem
- condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac
- lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac
- habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam
- at arcu eget enim interdum rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna
- lectus, hendrerit tempus pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam
- elementum malesuada ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet
- sem condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus
- ac lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac
- habitasse platea dictumst.
- </hy-paragraph-text>
- </hy-tabs-item>
- </hy-tabs>
+ <hy-prominent-image
+ text-title="Making waves with research"
+ image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+ />
+ </hy-main-content-wrapper>
+ <!--
+ <hy-introduction
+ reversed
+ text-title="This is an introduction"
+ text-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque pretium leo quis efficitur. Praesent lorem sapien, pharetra ac suscipit non, bibendum sed nisi. Suspendisse semper felis quam, ut congue dui interdum at. Phasellus et porta libero, nec lobortis odio. Mauris ut elementum risus. Ut sed consectetur tellus. Duis pellentesque, ante in tempus pellentesque, elit nisi volutpat erat, in semper leo metus nec purus. Mauris eu finibus diam. Vestibulum eget ex et magna euismod porttitor. Pellentesque non tellus ornare, volutpat metus sit amet, ornare est. Morbi et ornare ipsum. Pellentesque condimentum magna est, vel luctus velit iaculis quis. Ut eu mi non augue dictum porta. Aliquam erat volutpat. Praesent volutpat, turpis nec mattis condimentum, mi lectus varius tellus, mattis tempus lorem justo et neque."
+ url="https://www.google.com"
+ url-title="Check this link"
+ sc-label="label for link"
+ image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
+ ></hy-introduction>
+
+ <hy-banner
+ text-title="Check upcoming conferences"
+ text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
+ url="#this-is-an-accordion-item-2--title"
+ url-title="Show list of conferences"
+ sc-label="List of conferences"
+ >
+ </hy-banner>
+ <section>
+ <a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
+ </section>
+ <hy-banner
+ text-title="Check upcoming conferences"
+ text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
+ url="#this-is-an-accordion-item-2--title"
+ url-title="Show list of conferences"
+ sc-label="List of conferences"
+ >
+ </hy-banner>
+
+ <hy-accordion-container accordionId="example-accordion">
+ <hy-accordion-item accordiontitle="This is an accordion item 1">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="This is an accordion item 2">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ <hy-accordion-item accordiontitle="This is an accordion item 3">
+ <hy-paragraph-text>Accordion content</hy-paragraph-text>
+ </hy-accordion-item>
+ </hy-accordion-container>
+
+ -->
+ <!--
+ <hy-main-content-wrapper>
<hy-heading heading="h2" section="contentsection">
- MORE TABS
+ A process illustrated with steps
</hy-heading>
- <hy-tabs tab-id="example-tabs-2">
- <hy-tabs-item tab-title="More tabs 1">
- <hy-paragraph-text>
- MORE TABSLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac orci nisl. Nam at arcu eget enim
- interdum rhoncus eu nec turpis. Duis in est id nunc dictum lobortis. Nullam magna lectus, hendrerit
- tempus pharetra at, cursus sit amet orci. Aenean in pulvinar mi. Nulla facilisi. Etiam elementum
- malesuada ante, quis facilisis arcu varius consectetur. Phasellus eu nisl elementum, laoreet sem
- condimentum, hendrerit urna. Ut eu lorem et nunc consectetur bibendum. Nulla sed orci urna. Vivamus ac
- lectus ex. Nam sit amet tincidunt leo. In sed nunc eu odio semper maximus vel suscipit ligula. In hac
- habitasse platea dictumst.
- </hy-paragraph-text>
- </hy-tabs-item>
- <hy-tabs-item tab-title="More tabs 2">MORE TABS Tab Content</hy-tabs-item>
- <hy-tabs-item tab-title="More tabs Item 2">MORE TABSTab Content TWO Here Tab Content TWO Here</hy-tabs-item>
- <hy-tabs-item tab-title="More tabs Accordion in tabs">
- <hy-accordion-container accordionId="example-accordion">
- <hy-accordion-item accordiontitle="MORE TABS ACCORDION">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is a accordion item 2">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is a accordion item 3">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- </hy-accordion-container>
- </hy-tabs-item>
- </hy-tabs>
- <hy-tabs tab-id="example-3" tab-list-label="Example tabs 3">
- <hy-tabs-item tab-title="Third tab">
- Hello
- </hy-tabs-item>
- <hy-tabs-item tab-title="Third tab second">
- Bye
- </hy-tabs-item>
- </hy-tabs>
+ <hy-large-process-flow
+ data-items='[
+ {"phaseTitle":"First phase title",
+ "boxes": [
+ {"heading": "Hanc ego cum teneam sententiam",
+ "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
+ "links":[{"label":"Link to another page", "url": "https://helsinki.fi"}]},
+ {"heading": "Hanc ego cum teneam sententiam",
+ "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
+ "links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
+ {"label":"Link to another page", "url": "https://helsinki.fi"}]},
+ {"heading": "Hanc ego cum teneam sententiam",
+ "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in."},
+ {"heading": "Hanc ego cum teneam sententiam",
+ "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
+ "links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
+ {"label":"Link to another page", "url": "https://helsinki.fi"}]}
+ ]
+ },
+ {"phaseTitle":"Second phase title",
+ "boxes": [
+ {"heading": "Hanc ego cum teneam sententiam",
+ "description":"<pre>\r\n<u>Certe<\/u>, <strong>inquam<\/strong>, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem \r\nanimadversionem atque in liberos atque insitam<\/pre>\r\n\r\n<p> <\/p>\r\n\r\n<h4>atque<\/h4>\r\n",
+ "links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
+ {"label":"Link to another page", "url": "https://helsinki.fi"}]}
+ ]
+ }
+ ]'
+ >
+ </hy-large-process-flow>
</hy-main-content-wrapper>
- </div>
+ --></div>
</hy-main>
<!--