diff --git a/blocks/blog-home/blog-home.css b/blocks/blog-home/blog-home.css
index 4e2aed77..5ea61bd7 100644
--- a/blocks/blog-home/blog-home.css
+++ b/blocks/blog-home/blog-home.css
@@ -716,9 +716,9 @@ h5 {
/* Desktop styles */
@media only screen and (min-width: 1200px) {
- .thought-leadership-home.main,
- .blog-home.main {
- padding-top: calc(var(--nav-height) + 37px);
+ .thought-leadership-home.main,
+ .blog-home.main {
+ padding-top: var(--nav-height-desktop);
}
main .section.thought-leadership-home-container,
diff --git a/blocks/header/header.css b/blocks/header/header.css
index 9c0a5b9b..4e8b4f8a 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -471,7 +471,7 @@ header nav .nav-sections > ul > li {
header nav .nav-sections > ul > li[aria-expanded='true']::after {
content: '';
position: fixed;
- top: calc(var(--nav-height) + 37px);
+ top: var(--nav-height-desktop);
bottom: 0;
left: 0;
right: 0;
@@ -486,7 +486,7 @@ header nav .nav-sections > ul > li {
grid-template-columns: repeat(3, 1fr);
gap: 3.5rem 5.937rem;
justify-content: space-between;
- top: calc(var(--nav-height) + 37px);
+ top: var(--nav-height-desktop);
left: 0;
width: 100vw;
height: auto;
diff --git a/blocks/pdf-viewer/pdf-viewer.css b/blocks/pdf-viewer/pdf-viewer.css
index 137c6683..c21fc749 100644
--- a/blocks/pdf-viewer/pdf-viewer.css
+++ b/blocks/pdf-viewer/pdf-viewer.css
@@ -15,7 +15,7 @@ body.document .section.leadspace-container > div:first-child > .leadspace.docume
border-radius: 10px;
overflow: hidden;
background-color: var(--neutral-white);
- box-shadow: 0 var(--spacer-element-03) var(--spacer-element-07) rgba(0 0 0 / 15%);
+ box-shadow: var(--box-shadow-large);
}
.pdf-viewer.embed-mode--full-window {
diff --git a/blocks/quick-links-buttons/quick-links-buttons.css b/blocks/quick-links-buttons/quick-links-buttons.css
new file mode 100644
index 00000000..0c892e15
--- /dev/null
+++ b/blocks/quick-links-buttons/quick-links-buttons.css
@@ -0,0 +1,103 @@
+/* Block - Quick Links Buttons */
+.quick-links-buttons .quick-links-buttons__item {
+ padding: 0 var(--spacer-element-07);
+ margin-bottom: var(--spacer-element-05);
+}
+
+.quick-links-buttons .quick-links-buttons__item:last-child {
+ margin-bottom: 0;
+}
+
+/* Brand - Base Button */
+.quick-links-buttons .quick-links-buttons__item a {
+ width: 100%;
+ display: block;
+ text-align: center;
+ text-decoration: none;
+ font-family: var(--sans-serif-font-medium);
+ font-size: var(--font-size-14);
+ font-weight: 500;
+ letter-spacing: var(--letter-spacing-1);
+ padding: var(--spacer-element-04) var(--spacer-element-07);
+ border-radius: 40px;
+ color: var(--primary-purple);
+ border-width: 2px;
+ border-color: var(--primary-purple);
+ border-style: solid;
+ background-color: transparent;
+ transition: all .25s ease-in;
+}
+
+.quick-links-buttons .quick-links-buttons__item a:hover {
+ color: var(--neutral-white) !important;
+ background-color: var(--primary-purple);
+}
+
+/* Brand - Curam */
+.quick-links-buttons.color-curam .quick-links-buttons__item a {
+ color: var(--secondary-orange);
+ border-color: var(--secondary-orange);
+}
+
+/* Brand - Health Insights */
+.quick-links-buttons.color-health-insights .quick-links-buttons__item a {
+ color: var(--primary-purple);
+ border-color: var(--primary-purple);
+}
+
+/* Brand - Merge */
+.quick-links-buttons.color-merge .quick-links-buttons__item a {
+ color: var(--secondary-magenta);
+ border-color: var(--secondary-magenta);
+}
+
+/* Brand - MarketScan */
+.quick-links-buttons.color-marketscan .quick-links-buttons__item a {
+ color: var(--secondary-red);
+ border-color: var(--secondary-red);
+}
+
+/* Brand - Micromedex */
+.quick-links-buttons.color-micromedex .quick-links-buttons__item a {
+ color: var(--secondary-blue);
+ border-color: var(--secondary-blue);
+}
+
+/* Brand - Base Button Hover */
+.quick-links-buttons.color-curam .quick-links-buttons__item a:hover {
+ background-color: var(--secondary-orange);
+}
+
+.quick-links-buttons.color-health-insights .quick-links-buttons__item a:hover {
+ background-color: var(--primary-purple);
+}
+
+.quick-links-buttons.color-merge .quick-links-buttons__item a:hover {
+ background-color: var(--secondary-magenta);
+}
+
+.quick-links-buttons.color-marketscan .quick-links-buttons__item a:hover {
+ background-color: var(--secondary-red);
+}
+
+.quick-links-buttons.color-micromedex .quick-links-buttons__item a:hover {
+ background-color: var(--secondary-blue);
+}
+
+.quick-links-buttons.color-zelta .quick-links-buttons__item a:hover {
+ background-color: var(--secondary-green);
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+ /* Block - Quick Links Buttons */
+ .quick-links-buttons .quick-links-buttons__item {
+ padding: 0 var(--spacer-element-10);
+ margin-bottom: var(--spacer-element-07);
+ }
+
+ /* Brand - Base Button */
+ .quick-links-buttons .quick-links-buttons__item a {
+ font-size: var(--font-size-16);
+ }
+}
diff --git a/blocks/quick-links-buttons/quick-links-buttons.js b/blocks/quick-links-buttons/quick-links-buttons.js
new file mode 100644
index 00000000..c3b85354
--- /dev/null
+++ b/blocks/quick-links-buttons/quick-links-buttons.js
@@ -0,0 +1,10 @@
+export default function decorate(block) {
+ const blockName = block.getAttribute('data-block-name');
+ if (!blockName) {
+ return;
+ }
+
+ [...block.children].forEach((element) => {
+ element.classList.add(`${blockName}__item`);
+ });
+}
diff --git a/blocks/quick-links-header/quick-links-header.css b/blocks/quick-links-header/quick-links-header.css
new file mode 100644
index 00000000..a710661f
--- /dev/null
+++ b/blocks/quick-links-header/quick-links-header.css
@@ -0,0 +1,54 @@
+/* Section - Quick Links Header */
+main > .section.quick-links-header-container {
+ border-bottom: 1px solid var(--neutral-sand);
+}
+
+main > .section.quick-links-header-container > div {
+ padding: 0;
+}
+
+/* Block - Quick Links Header */
+.quick-links-header .quick-links-header__inner {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0 var(--spacer-element-07) !important;
+ height: var(--gap-84);
+}
+
+.quick-links-header .quick-links-header__col {
+ width: 50%;
+ line-height: 75%;
+}
+
+.quick-links-header .quick-links-header__col-2 {
+ text-align: right;
+ margin-left: auto;
+}
+
+.quick-links-header a {
+ display: inline-block;
+}
+
+.quick-links-header .icon {
+ display: block;
+}
+
+.quick-links-header .icon svg {
+ width: auto;
+ height: var(--spacer-element-07);
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+ /* Block - Quick Links Header */
+ .quick-links-header .quick-links-header__inner {
+ padding: 0 var(--spacer-element-10) !important;
+ height: var(--gap-120);
+ }
+
+ .quick-links-header .icon svg {
+ width: auto;
+ height: var(--spacer-element-09);
+ }
+}
diff --git a/blocks/quick-links-header/quick-links-header.js b/blocks/quick-links-header/quick-links-header.js
new file mode 100644
index 00000000..b93d1094
--- /dev/null
+++ b/blocks/quick-links-header/quick-links-header.js
@@ -0,0 +1,21 @@
+export default function decorate(block) {
+ const blockName = block.getAttribute('data-block-name');
+ if (!blockName) {
+ return;
+ }
+
+ [...block.children].forEach((element) => {
+ element.classList.add(`${blockName}__inner`);
+
+ // Find all the div elements within the inner content class
+ const innerElements = element.querySelectorAll(`.${blockName}__inner div`);
+
+ // Add the class to column and append a number to each of these div elements
+ let counter = 1;
+ innerElements.forEach((divElement) => {
+ const newClass = `${blockName}__col-${counter}`;
+ divElement.classList.add(`${blockName}__col`, newClass);
+ counter += 1; // Use prefix notation to increment the counter
+ });
+ });
+}
diff --git a/blocks/quick-links-socials/quick-links-socials.css b/blocks/quick-links-socials/quick-links-socials.css
new file mode 100644
index 00000000..bb11ac48
--- /dev/null
+++ b/blocks/quick-links-socials/quick-links-socials.css
@@ -0,0 +1,64 @@
+/* Section - Quick Links Socials */
+main .section .quick-links-socials-wrapper,
+main .section > .quick-links-socials-wrapper:last-child {
+ margin-top: var(--spacer-layout-05);
+}
+
+/* Block - Quick Links Socials */
+.quick-links-socials {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: var(--gap-16)
+}
+
+.quick-links-socials .quick-links-socials__item {
+ text-align: center;
+ width: var(--spacer-element-10);
+}
+
+.quick-links-socials .quick-links-socials__item a {
+ display: inline-block;
+ width: var(--spacer-element-10);
+ height: var(--spacer-element-10);
+ border-radius: 50%;
+ text-align: center;
+ border: 2px solid var(--neutral-sand);
+ background-image: var(--gradient-to-right-white);
+ background-position: 0 0;
+ background-size: 200% auto;
+ transition: all .3s ease-in-out;
+}
+
+.quick-links-socials .quick-links-socials__item a:hover {
+ background-image: var(--gradient-to-right);
+ background-position: 100% 0;
+}
+
+.quick-links-socials .quick-links-socials__item a span {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+}
+
+.quick-links-socials .quick-links-socials__item a span svg {
+ height: 16px;
+}
+
+.quick-links-socials .quick-links-socials__item a:hover span svg path {
+ fill: var(--neutral-white);
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+ /* Block - Quick Links Socials */
+ .quick-links-socials {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/blocks/quick-links-socials/quick-links-socials.js b/blocks/quick-links-socials/quick-links-socials.js
new file mode 100644
index 00000000..c3b85354
--- /dev/null
+++ b/blocks/quick-links-socials/quick-links-socials.js
@@ -0,0 +1,10 @@
+export default function decorate(block) {
+ const blockName = block.getAttribute('data-block-name');
+ if (!blockName) {
+ return;
+ }
+
+ [...block.children].forEach((element) => {
+ element.classList.add(`${blockName}__item`);
+ });
+}
diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js
index 4e264455..b1b2950b 100644
--- a/scripts/lib-franklin.js
+++ b/scripts/lib-franklin.js
@@ -600,6 +600,8 @@ export function loadHeader(header) {
const headerBlock = buildBlock('header', '');
header.append(headerBlock);
decorateBlock(headerBlock);
+ document.querySelector('body').classList.add('header-visible');
+
return loadBlock(headerBlock);
}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index f5f22529..10cd95be 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -19,11 +19,12 @@ const LCP_BLOCKS = ['leadspace', 'blog-home']; // add your LCP blocks to the lis
window.hlx.RUM_GENERATION = 'merative'; // add your RUM generation information here
/**
- * Determine if we are serving content for the block-library, if so don't load the header or footer
- * @returns {boolean} True if we are loading block library content
+ * Determine if we are serving content for a specific keyword
+ * @param {string} keyword - The keyword to check in the URL path
+ * @returns {boolean} True if we are loading content for the specified keyword
*/
-export function isBlockLibrary() {
- return window.location.pathname.includes('block-library');
+export function locationCheck(keyword) {
+ return window.location.pathname.includes(keyword);
}
/**
@@ -884,7 +885,7 @@ async function loadLazy(doc) {
const element = hash ? main.querySelector(hash) : false;
if (hash && element) element.scrollIntoView();
- if (!isBlockLibrary()) {
+ if (!locationCheck('block-library') && !locationCheck('quick-links')) {
loadHeader(doc.querySelector('header'));
loadFooter(doc.querySelector('footer'));
}
diff --git a/styles/images/patterns/pattern-health-insights.svg b/styles/images/patterns/pattern-health-insights.svg
new file mode 100644
index 00000000..80b3b12c
--- /dev/null
+++ b/styles/images/patterns/pattern-health-insights.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/styles/images/patterns/pattern-micromedex.svg b/styles/images/patterns/pattern-micromedex.svg
new file mode 100644
index 00000000..a729716a
--- /dev/null
+++ b/styles/images/patterns/pattern-micromedex.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/styles/styles.css b/styles/styles.css
index 7d044671..52519c19 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -93,14 +93,29 @@
--primary-purple: #9900FF;
--purple-140: #6400A6;
- /* Merative figma design spec */
- --primary-red: #FA1E32;
- --primary-black: #000;
-
- /* secondary */
+ /* brand secondary */
--secondary-blue: #1385E2;
--secondary-green: #05BC71;
--secondary-yellow: #FFC036;
+ --secondary-orange: #FF8241;
+ --secondary-magenta: #E834BA;
+ --secondary-red: #FB4B5B;
+
+ /* neutrals */
+ --neutral-carbon: #20201F;
+ --neutral-sand: #E7E2DA;
+ --neutral-bone: #FAF8F6;
+ --neutral-white: #FFF;
+ --neutral-grey-tint100: #B9B5AE;
+ --neutral-grey-tint120: #8B8883;
+
+ /* feedback */
+ --feedback-green: #059641;
+ --feedback-red: #D21313;
+
+ /* utility */
+ --primary-red: #FA1E32;
+ --primary-black: #000;
/* gradient */
--gradient-horizontal-down: linear-gradient(180deg, var(--primary-purple) 0%, var(--primary-red) 100%);
@@ -114,17 +129,9 @@
--gradient-to-right-transparent-hover: linear-gradient(-270deg, transparent 0%, var(--primary-purple) 50%, var(--primary-red) 100%);
--gradient-to-right-white: linear-gradient(-270deg, var(--neutral-white) 0%, var(--neutral-white) 50%, var(--primary-red) 100%);
- /* neutrals */
- --neutral-carbon: #20201F;
- --neutral-sand: #E7E2DA;
- --neutral-bone: #FAF8F6;
- --neutral-white: #FFF;
- --neutral-grey-tint100: #B9B5AE;
- --neutral-grey-tint120: #8B8883;
+ /* box shadow */
+ --box-shadow-large: 0 var(--spacer-element-02) var(--spacer-element-06) 0 rgb(185 181 174 / 40%);
- /* feedback */
- --feedback-green: #059641;
- --feedback-red: #D21313;
/* ----typography--- */
@@ -193,10 +200,11 @@
/* nav height */
--nav-height: 93px;
--nav-height-mobile: 93px;
- --nav-height-mobile-section: 93px;
+ --nav-height-desktop: 130px;
--sticky-nav-height: 80px;
/* gap spacers */
+ --gap-16: 16px;
--gap-24: 24px;
--gap-48: 48px;
--gap-84: 84px;
@@ -322,12 +330,17 @@ body {
-webkit-font-smoothing: antialiased;
}
+/* Set body to display when content has been loaded */
body.appear {
display: unset;
}
-main {
+/* Add padding-top when Header Nav is visible */
+body.header-visible main {
padding-top: var(--nav-height-mobile);
+}
+
+main {
margin: auto;
}
@@ -1378,12 +1391,52 @@ main > .section-content-body.section-with-sidebar .section-content-body__text p
margin: var(--spacer-element-05) 0;
}
+/* Page - Quick Links */
+body.quick-links {
+ background-color: var(--neutral-white);
+ height: 100%;
+}
+
+body.quick-links > main {
+ max-width: var(--text-max-container);
+ margin: 0 auto;
+ background-color: var(--neutral-bone);
+}
+
+body.quick-links main .section > div {
+ max-width: inherit;
+ padding: 0;
+}
+
+/* Section - Quick Links */
+.section.section-quick-links {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: calc(100vh - var(--gap-84) * 2);
+ padding: var(--spacer-layout-06) 0;
+}
+
+/* Section - Pattern Bar */
+.section-pattern {
+ height: var(--gap-84);
+ background-color: var(--neutral-bone);
+ background-repeat: repeat-x;
+ background-size: auto 100%;
+ background-position: bottom left;
+}
+
+.bg-pattern-health-insights {
+ background-image: url('../../styles/images/patterns/pattern-health-insights.svg');
+}
+
+.bg-pattern-micromedex {
+ background-image: url('../../styles/images/patterns/pattern-micromedex.svg');
+}
+
/* Tablet */
@media only screen and (min-width: 768px) {
- main {
- padding-top: var(--nav-height-mobile)
- }
-
main .section.section-header > div:nth-child(1) > p {
max-width: 60%;
}
@@ -1482,6 +1535,16 @@ main > .section-content-body.section-with-sidebar .section-content-body__text p
.section-content-body .section-content-body__text h6 {
font-size: var(--font-size-21);
}
+
+ /* Section - Quick Links */
+ .section.section-quick-links {
+ min-height: calc(100vh - var(--gap-120) * 2);
+ }
+
+ /* Section - Pattern Bar */
+ .section-pattern {
+ height: var(--gap-120);
+ }
}
/* All except desktop */
@@ -1595,8 +1658,9 @@ main > .section-content-body.section-with-sidebar .section-content-body__text p
letter-spacing: var(--letter-spacing-1);
}
- main {
- padding-top: calc(var(--nav-height) + 37px);
+ /* Add padding-top when Header Nav is visible */
+ body.header-visible main {
+ padding-top: var(--nav-height-desktop);
}
/* Section Container */