From d1b9d4135e1ce509eb238f0435cf07e5e206cb2b Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <ekaterina.kondareva@helsinki.fi>
Date: Tue, 6 Oct 2020 11:41:02 +0300
Subject: [PATCH] Nxstage 802 prominent image
---
src/components.d.ts | 16 ++
.../hy-main-content-wrapper.scss | 33 +--
src/components/hy-main/hy-main.scss | 19 +-
.../hy-prominent-image.scss | 56 ++++
.../hy-prominent-image/hy-prominent-image.tsx | 24 ++
src/components/hy-prominent-image/readme.md | 28 ++
src/components/image/readme.md | 2 +
src/global/_breakpoints.scss | 16 +-
src/index.html | 245 ++++++------------
9 files changed, 233 insertions(+), 206 deletions(-)
create mode 100644 src/components/hy-prominent-image/hy-prominent-image.scss
create mode 100644 src/components/hy-prominent-image/hy-prominent-image.tsx
create mode 100644 src/components/hy-prominent-image/readme.md
diff --git a/src/components.d.ts b/src/components.d.ts
index 05350742..61b2d9fb 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 bf2aa0eb..42aa09b5 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 aa78774a..d4563441 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 00000000..f38955a2
--- /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 00000000..b0b94591
--- /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 00000000..1f050f14
--- /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 5e3aca60..e1e51c7f 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 231510a1..17684055 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 78b8c652..a3b57187 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>
<!--
--
GitLab