diff --git a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
index 407fd1cb37922e1fb86135ed784357dd1d2a9fe7..da93db36acf2a7f9bc75105f9ecc762fd6ed144d 100644
--- a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
+++ b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
@@ -12,17 +12,17 @@
//tablet
padding-left: calc(100% / 8 + var(--gutter-narrow)); // 1 column padding
}
- @include breakpoint($medium) {
+ @include breakpoint($medium + 1) {
//small desktop
- padding-left: calc(100% / 8 + var(--gutter-medium)); // 1 column padding
+ padding-left: calc(100% / 12 + var(--gutter-medium)); // 1 column padding
}
@include breakpoint($wide) {
//mid desktop
- padding-left: calc(100% / 8 + var(--gutter-wide)); // 1 column padding
+ padding-left: calc(100% / 12 + var(--gutter-wide)); // 1 column padding
}
@include breakpoint($extrawide) {
//large desktop
- padding-left: calc(100% / 8 + var(--gutter-extrawide)); // 1 column padding
+ padding-left: calc(100% / 12 + var(--gutter-extrawide)); // 1 column padding
}
&__phase {
@@ -105,14 +105,15 @@
&__content {
background-color: var(--grayscale-background-box);
- margin: 0;
+ margin: 0 -56px;
padding: 48px 0 24px 0;
position: relative;
top: -24px;
@include breakpoint($narrow) {
- margin-bottom: -8px;
- margin-left: 32px;
+ //margin-bottom: -8px;
+ //margin-left: 32px;
+ margin: 0 0 -8px 32px;
padding: 32px 0;
top: -32px;
}
@@ -125,7 +126,8 @@
@include font-weight(600);
letter-spacing: -0.5px;
margin-bottom: 24px;
- padding: 0 16px;
+ //padding: 0 16px;
+ padding: 0 56px;
@include breakpoint($narrow) {
@include font-size(26px, 30px);
@@ -142,7 +144,8 @@
@include font-size(16px, 24px);
letter-spacing: 0;
margin-bottom: 24px;
- padding: 0 16px;
+ //padding: 0 16px;
+ padding: 0 56px;
@include breakpoint($narrow) {
padding: 0 44px;
@@ -154,9 +157,11 @@
display: flex;
flex-direction: column;
margin-right: 0;
+ padding: 0 56px;
@include breakpoint($narrow) {
margin-right: -6px;
+ padding: 0;
}
.phase-link {
diff --git a/src/components/hy-large-process-flow/hy-large-process-flow.scss b/src/components/hy-large-process-flow/hy-large-process-flow.scss
index a9df0a89d200bbf50af5a11b8637ccb169ae2583..5978d0650a7131a6a387fdc09da3b1366ac3a332 100644
--- a/src/components/hy-large-process-flow/hy-large-process-flow.scss
+++ b/src/components/hy-large-process-flow/hy-large-process-flow.scss
@@ -7,11 +7,11 @@
width: 100%;
@include breakpoint($narrow) {
- //tablet
+ //tablet up till 768 (including 768px)
max-width: calc(100% / 8 * 7 + var(--gutter-narrow)); // 7 columns out of 8
}
- @include breakpoint($medium) {
- //small desktop
+ @include breakpoint($medium + 1) {
+ //small desktop; > 768
max-width: calc(100% / 12 * 8 + var(--gutter-medium)); // 8 columns out of 12
}
@include breakpoint($wide) {
diff --git a/src/index.html b/src/index.html
index 7d516fcf1e7d6aaeb70126234e1d2f4a72eddfdf..a704af84e341028f498cfaf726ce326dac23ddce 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,39 +13,84 @@
<body class="full-width" style="padding: 0; margin: 0;">
<hy-main has-sidebar="false">
<div class="layout-content">
- <hy-heading heading="h2" section="contentsection">
- A process illustrated with steps
- </hy-heading>
- <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":"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"}]}
- ]
- }
- ]'
+ <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-large-process-flow>
+ </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">
+ A process illustrated with steps
+ </hy-heading>
+ <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":"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"}]}
+ ]
+ }
+ ]'
+ >
+ </hy-large-process-flow>
+ </hy-main-content-wrapper>
</div>
</hy-main>