From 26b7ffb8342a393d9ce7a955701f935c09ce303f Mon Sep 17 00:00:00 2001 From: Kiran Murugulla Date: Wed, 22 Jul 2026 10:37:15 -0400 Subject: [PATCH 1/9] fix: update header and footer to load from /nav and /footer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Changed header.js to load navigation from /nav instead of /content/nav - Changed footer.js to load footer from /footer instead of /content/footer - Added content/ directory to .gitignore (cloned from DA, not version controlled) Content has been moved to /nav and /footer in DA and pushed successfully. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .gitignore | 5 +++++ blocks/footer/footer.js | 2 +- blocks/header/header.js | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 4ac0f94..227e4d5 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ coverage/* logs/* node_modules/* +content/* helix-importer-ui .DS_Store @@ -13,3 +14,7 @@ helix-importer-ui !AGENTS.md migration-work/navigation-validation/ migration-work/footer-validation/ + +.hlx/.da-token.json + +content diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index ed47685..3e564d6 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -7,7 +7,7 @@ import { loadFragment } from '../fragment/fragment.js'; */ export default async function decorate(block) { const footerMeta = getMetadata('footer'); - const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/content/footer'; + const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer'; const fragment = await loadFragment(footerPath); block.textContent = ''; diff --git a/blocks/header/header.js b/blocks/header/header.js index 4122228..72ee804 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -22,7 +22,7 @@ function toggleMobileMenu(nav, forceClose) { */ export default async function decorate(block) { const navMeta = getMetadata('nav'); - const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/content/nav'; + const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav'; const fragment = await loadFragment(navPath); block.textContent = ''; From b9d5381913aac5b81dd21971b8f0c3177fd29596 Mon Sep 17 00:00:00 2001 From: Kiran Murugulla Date: Wed, 22 Jul 2026 11:17:03 -0400 Subject: [PATCH 2/9] refactor: consolidate duplicate blocks into variants MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Merged duplicate blocks into proper EDS variant pattern: - cards + cards-story → cards block with .story variant - columns + columns-feature → columns block with .feature variant - hero + hero-banner → hero block with .banner variant Each base block now handles multiple variants via CSS classes. Duplicate folders (cards-story, columns-feature, hero-banner) should be deleted. Block usage in content should be updated: - Cards-Story → Cards (story) - Columns-Feature → Columns (feature) - Hero-Banner → Hero (banner) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- blocks/cards/cards.css | 151 +++++++++++++++++++++++++++++++++++ blocks/cards/cards.js | 5 ++ blocks/columns/columns.css | 111 ++++++++++++++++++++++++++ blocks/columns/columns.js | 5 ++ blocks/hero/hero.css | 157 +++++++++++++++++++++++++++++++++++++ blocks/hero/hero.js | 10 +++ 6 files changed, 439 insertions(+) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 74ea4fe..7454408 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -1,3 +1,4 @@ +/* Default cards variant */ .cards > ul { list-style: none; margin: 0; @@ -25,3 +26,153 @@ aspect-ratio: 4 / 3; object-fit: cover; } + +/* Story variant - horizontal cards with image left, content right */ +.cards.story > ul { + grid-template-columns: 1fr; + gap: 32px; +} + +.cards.story > ul > li { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 24px; + background-color: transparent; + border: 0; +} + +.cards.story .cards-card-image { + flex: 0 0 auto; + line-height: 0; +} + +.cards.story .cards-card-image picture, +.cards.story .cards-card-image img { + display: block; +} + +.cards.story .cards-card-image img { + width: 190px; + height: 190px; + object-fit: cover; +} + +.cards.story .cards-card-body { + flex: 1 1 auto; +} + +.cards.story .cards-card-body h2, +.cards.story .cards-card-body h3, +.cards.story .cards-card-body h4 { + margin: 0 0 16px; + padding: 0; + color: var(--heading-color); + font-family: var(--heading-font-family); + font-weight: 400; + font-size: 24px; + line-height: 30px; +} + +.cards.story .cards-card-body h2 a:any-link, +.cards.story .cards-card-body h3 a:any-link, +.cards.story .cards-card-body h4 a:any-link { + color: inherit; + text-decoration: none; +} + +.cards.story .cards-card-body h2 a:hover, +.cards.story .cards-card-body h3 a:hover, +.cards.story .cards-card-body h4 a:hover { + text-decoration: underline; +} + +.cards.story .cards-card-body p { + margin: 0 0 16px; + color: var(--heading-color); + font-size: 20px; + line-height: 28px; +} + +.cards.story .cards-card-body p:last-child { + margin-bottom: 0; +} + +.cards.story .cards-card-body p:last-child a:any-link { + display: inline-block; + color: var(--link-color); + font-family: var(--heading-font-family); + font-weight: 500; + font-size: 20px; + line-height: 36px; + text-decoration: none; +} + +.cards.story .cards-card-body p:last-child a:any-link::after { + content: ""; + display: inline-block; + width: 1.1em; + height: 0.7em; + margin-left: 0.4em; + background-color: currentcolor; + mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; +} + +.cards.story .cards-card-body p:last-child a:hover { + color: var(--link-hover-color); + text-decoration: none; +} + +@media (width >= 900px) { + .cards.story > ul { + grid-template-columns: 1fr 1fr; + gap: 24px 48px; + } +} + +/* Story variant with paleblue section - large full-width cards */ +@media (width >= 900px) { + .section.paleblue .cards.story > ul { + grid-template-columns: 1fr; + gap: 24px; + } + + .section.paleblue .cards.story > ul > li { + align-items: center; + gap: 48px; + } + + .section.paleblue .cards.story > ul > li:nth-child(odd) { + flex-direction: row-reverse; + } + + .section.paleblue .cards.story .cards-card-image { + flex: 1 1 55%; + max-width: 55%; + } + + .section.paleblue .cards.story .cards-card-image img { + width: 100%; + height: auto; + aspect-ratio: 646 / 283; + object-fit: cover; + } + + .section.paleblue .cards.story .cards-card-body { + flex: 1 1 45%; + } + + .section.paleblue .cards.story .cards-card-body h2, + .section.paleblue .cards.story .cards-card-body h3, + .section.paleblue .cards.story .cards-card-body h4 { + font-family: var(--heading-font-family); + font-weight: 500; + font-size: 28px; + line-height: 36px; + } + + .section.paleblue .cards.story .cards-card-body p { + color: var(--text-color); + line-height: 30px; + } +} diff --git a/blocks/cards/cards.js b/blocks/cards/cards.js index 4e6ec93..588b7cc 100644 --- a/blocks/cards/cards.js +++ b/blocks/cards/cards.js @@ -1,5 +1,10 @@ import { createOptimizedPicture } from '../../scripts/aem.js'; +/** + * Decorates cards block + * Supports variants: default, story + * @param {Element} block The cards block element + */ export default function decorate(block) { /* change to ul, li */ const ul = document.createElement('ul'); diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index f2b203e..4a63c40 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -1,3 +1,4 @@ +/* Default columns variant */ .columns > div { display: flex; flex-direction: column; @@ -31,3 +32,113 @@ order: unset; } } + +/* Feature variant - styled columns for featured content */ +.columns.feature img { + display: block; + width: 100%; +} + +/* Feature variant: 1 column - centered intro/about section */ +.columns.feature.columns-1-cols > div { + max-width: 950px; + margin: 0 auto; + text-align: center; +} + +.columns.feature.columns-1-cols h2 { + margin: 0 0 16px; + color: var(--heading-color); + font-size: 44px; + font-weight: 500; + line-height: 56px; + text-align: center; +} + +.columns.feature.columns-1-cols p { + margin: 0 0 15px; + color: var(--text-color); + font-size: 20px; + font-weight: 400; + line-height: 30px; + text-align: center; +} + +.columns.feature.columns-1-cols a:any-link { + color: var(--link-color); + font-weight: 400; + text-decoration: underline; +} + +/* Feature variant: 2 columns - featured story with background */ +.columns.feature.columns-2-cols > div { + background-color: var(--light-color); +} + +.columns.feature.columns-2-cols > div > div { + padding: 32px; +} + +.columns.feature.columns-2-cols > div > .columns-img-col { + padding: 0; +} + +.columns.feature.columns-2-cols .columns-img-col img { + height: 100%; + object-fit: cover; +} + +.columns.feature.columns-2-cols h3 { + margin: 0 0 16px; + color: var(--heading-color); + font-size: 28px; + font-weight: 500; + line-height: 36px; +} + +.columns.feature.columns-2-cols h3 a:any-link { + color: var(--heading-color); + text-decoration: none; +} + +.columns.feature.columns-2-cols h3 a:hover { + text-decoration: underline; +} + +.columns.feature.columns-2-cols p { + margin: 0 0 15px; + color: var(--text-color); + font-size: 20px; + font-weight: 400; + line-height: 30px; +} + +.columns.feature.columns-2-cols p a:any-link { + color: var(--link-color); + font-size: 20px; + font-weight: 400; + text-decoration: none; +} + +.columns.feature.columns-2-cols p a:hover { + text-decoration: underline; +} + +@media (width >= 900px) { + .columns.feature.columns-2-cols > div { + align-items: stretch; + flex-direction: row; + } + + .columns.feature.columns-2-cols > div > div { + flex: 0 1 57%; + order: 0; + padding: 32px 58px 32px 32px; + } + + .columns.feature.columns-2-cols > div > .columns-img-col { + flex: 0 1 43%; + order: 1; + padding: 0; + } +} diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index 9b78c81..2e4af7b 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -1,3 +1,8 @@ +/** + * Decorates columns block + * Supports variants: default, feature + * @param {Element} block The columns block element + */ export default function decorate(block) { const cols = [...block.firstElementChild.children]; block.classList.add(`columns-${cols.length}-cols`); diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index 974eaf2..c5fab04 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -1,3 +1,4 @@ +/* Default hero variant */ .hero-container .hero-wrapper { max-width: unset; padding: 0; @@ -34,4 +35,160 @@ .hero { padding: 40px 32px; } +} + +/* Banner variant - Full-bleed background-image banner with navy fade overlay */ +.hero.banner { + position: relative; + min-height: 320px; + overflow: hidden; + padding: 0; +} + +.hero.banner picture { + position: absolute; + inset: 0; + z-index: initial; +} + +.hero.banner img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: 50% 50%; +} + +.hero.banner > div:first-child { + position: absolute; + inset: 0; + margin: 0; + display: block; + height: 100%; + width: 100%; +} + +.hero.banner::before { + content: ''; + position: absolute; + inset: 0; + z-index: 1; + background-image: linear-gradient( + 90deg, + var(--heading-color) 0%, + var(--heading-color) 70%, + rgb(0 24 113 / 55%) 100% + ); + pointer-events: none; +} + +.hero.banner > div:last-child { + position: relative; + z-index: 2; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 320px; + box-sizing: border-box; + padding: 32px 24px; +} + +.hero.banner > div:last-child > div { + width: 100%; +} + +.hero.banner > div:first-child > div { + display: block; + height: 100%; + width: 100%; +} + +.hero.banner.no-image { + background-color: var(--heading-color); +} + +.hero.banner.no-image > div:first-child, +.hero.banner.no-image::before { + display: none; +} + +.hero.banner h1, +.hero.banner h2 { + margin: 0 0 32px; + color: #fff; + font-size: var(--heading-size-xxl, 44px); + font-weight: 500; + line-height: 1.27; + max-width: initial; +} + +.hero.banner h1 a:any-link, +.hero.banner h2 a:any-link { + color: #fff; + text-decoration: none; +} + +.hero.banner p { + margin: 0 0 15px; + color: #fff; + font-size: var(--body-font-size-m, 20px); + line-height: 1.5; +} + +.hero.banner > div:last-child p a:any-link, +main .hero.banner a.button:any-link { + display: inline-block; + margin: 8px 0 0; + border: 1px solid #fff; + border-radius: 0; + padding: 16px; + background: transparent; + color: #fff; + font-family: var(--heading-font-family); + font-size: var(--body-font-size-xs, 16px); + font-weight: 500; + line-height: 1.125; + text-decoration: none; + white-space: nowrap; +} + +.hero.banner > div:last-child p a:any-link:hover, +.hero.banner > div:last-child p a:any-link:focus-visible, +main .hero.banner a.button:any-link:hover, +main .hero.banner a.button:any-link:focus-visible { + background: #fff; + color: var(--heading-color); + text-decoration: none; +} + +@media (width >= 900px) { + .hero.banner { + min-height: 421px; + } + + .hero.banner::before { + background-image: linear-gradient( + 90deg, + var(--heading-color) 0%, + var(--heading-color) 45%, + rgb(0 24 113 / 0%) 75% + ); + } + + .hero.banner > div:last-child { + min-height: 421px; + max-width: 49%; + padding: 40px 0 40px 8.33%; + } + + .hero.banner h1, + .hero.banner h2 { + font-size: 44px; + line-height: 56px; + } + + .hero.banner p { + font-size: 20px; + line-height: 30px; + } } \ No newline at end of file diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index e69de29..65ab5c4 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -0,0 +1,10 @@ +/** + * Decorates hero block + * Supports variants: default, banner + * @param {Element} block The hero block element + */ +export default function decorate(block) { + if (!block.querySelector(':scope > div:first-child picture')) { + block.classList.add('no-image'); + } +} From 5a4c2cd78e96bcce19eeb5438819150d3c74e305 Mon Sep 17 00:00:00 2001 From: Kiran Murugulla Date: Wed, 22 Jul 2026 11:25:31 -0400 Subject: [PATCH 3/9] refactor(hero): make banner style the default MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove banner variant, make it the default hero style - Banner was the only style in use, no need for variant yet - Update documentation to reflect single style - Follow EDS best practice: don't create variants until needed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- blocks/hero/hero.css | 90 ++++++++++++++------------------------------ blocks/hero/hero.js | 1 - 2 files changed, 28 insertions(+), 63 deletions(-) diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index c5fab04..bc848a3 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -1,64 +1,30 @@ -/* Default hero variant */ +/* Hero - Full-bleed background-image banner with navy fade overlay */ .hero-container .hero-wrapper { max-width: unset; padding: 0; } .hero { - position: relative; - padding: 40px 24px; - min-height: 300px; -} - -.hero h1 { - max-width: 1200px; - margin-left: auto; - margin-right: auto; - color: var(--background-color); -} - -.hero picture { - position: absolute; - z-index: -1; - inset: 0; - object-fit: cover; - box-sizing: border-box; -} - -.hero img { - object-fit: cover; - width: 100%; - height: 100%; -} - -@media (width >= 900px) { - .hero { - padding: 40px 32px; - } -} - -/* Banner variant - Full-bleed background-image banner with navy fade overlay */ -.hero.banner { position: relative; min-height: 320px; overflow: hidden; padding: 0; } -.hero.banner picture { +.hero picture { position: absolute; inset: 0; z-index: initial; } -.hero.banner img { +.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } -.hero.banner > div:first-child { +.hero > div:first-child { position: absolute; inset: 0; margin: 0; @@ -67,7 +33,7 @@ width: 100%; } -.hero.banner::before { +.hero::before { content: ''; position: absolute; inset: 0; @@ -81,7 +47,7 @@ pointer-events: none; } -.hero.banner > div:last-child { +.hero > div:last-child { position: relative; z-index: 2; margin: 0; @@ -93,27 +59,27 @@ padding: 32px 24px; } -.hero.banner > div:last-child > div { +.hero > div:last-child > div { width: 100%; } -.hero.banner > div:first-child > div { +.hero > div:first-child > div { display: block; height: 100%; width: 100%; } -.hero.banner.no-image { +.hero.no-image { background-color: var(--heading-color); } -.hero.banner.no-image > div:first-child, -.hero.banner.no-image::before { +.hero.no-image > div:first-child, +.hero.no-image::before { display: none; } -.hero.banner h1, -.hero.banner h2 { +.hero h1, +.hero h2 { margin: 0 0 32px; color: #fff; font-size: var(--heading-size-xxl, 44px); @@ -122,21 +88,21 @@ max-width: initial; } -.hero.banner h1 a:any-link, -.hero.banner h2 a:any-link { +.hero h1 a:any-link, +.hero h2 a:any-link { color: #fff; text-decoration: none; } -.hero.banner p { +.hero p { margin: 0 0 15px; color: #fff; font-size: var(--body-font-size-m, 20px); line-height: 1.5; } -.hero.banner > div:last-child p a:any-link, -main .hero.banner a.button:any-link { +.hero > div:last-child p a:any-link, +main .hero a.button:any-link { display: inline-block; margin: 8px 0 0; border: 1px solid #fff; @@ -152,21 +118,21 @@ main .hero.banner a.button:any-link { white-space: nowrap; } -.hero.banner > div:last-child p a:any-link:hover, -.hero.banner > div:last-child p a:any-link:focus-visible, -main .hero.banner a.button:any-link:hover, -main .hero.banner a.button:any-link:focus-visible { +.hero > div:last-child p a:any-link:hover, +.hero > div:last-child p a:any-link:focus-visible, +main .hero a.button:any-link:hover, +main .hero a.button:any-link:focus-visible { background: #fff; color: var(--heading-color); text-decoration: none; } @media (width >= 900px) { - .hero.banner { + .hero { min-height: 421px; } - .hero.banner::before { + .hero::before { background-image: linear-gradient( 90deg, var(--heading-color) 0%, @@ -175,19 +141,19 @@ main .hero.banner a.button:any-link:focus-visible { ); } - .hero.banner > div:last-child { + .hero > div:last-child { min-height: 421px; max-width: 49%; padding: 40px 0 40px 8.33%; } - .hero.banner h1, - .hero.banner h2 { + .hero h1, + .hero h2 { font-size: 44px; line-height: 56px; } - .hero.banner p { + .hero p { font-size: 20px; line-height: 30px; } diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index 65ab5c4..01470d4 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -1,6 +1,5 @@ /** * Decorates hero block - * Supports variants: default, banner * @param {Element} block The hero block element */ export default function decorate(block) { From 201b737eeece388c131d2c0d167b9e6c2f6176cc Mon Sep 17 00:00:00 2001 From: Kiran Murugulla Date: Wed, 22 Jul 2026 12:23:27 -0400 Subject: [PATCH 4/9] refactor: rename and consolidate blocks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Delete consolidated block folders (cards-story, columns-feature, hero-banner) - Rename tabs-solutions → tabs - Rename video-feature → video - Update all class references in video block CSS and JS - Add draft test file at drafts/kiran/index.html 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- blocks/{tabs-solutions => tabs}/metadata.json | 0 .../tabs-solutions.css => tabs/tabs.css} | 0 .../tabs-solutions.js => tabs/tabs.js} | 0 blocks/{video-feature => video}/metadata.json | 0 .../video-feature.css => video/video.css} | 30 +++++++++---------- .../video-feature.js => video/video.js} | 6 ++-- drafts/kiran/index.html | 6 ++++ 7 files changed, 24 insertions(+), 18 deletions(-) rename blocks/{tabs-solutions => tabs}/metadata.json (100%) rename blocks/{tabs-solutions/tabs-solutions.css => tabs/tabs.css} (100%) rename blocks/{tabs-solutions/tabs-solutions.js => tabs/tabs.js} (100%) rename blocks/{video-feature => video}/metadata.json (100%) rename blocks/{video-feature/video-feature.css => video/video.css} (76%) rename blocks/{video-feature/video-feature.js => video/video.js} (95%) create mode 100644 drafts/kiran/index.html diff --git a/blocks/tabs-solutions/metadata.json b/blocks/tabs/metadata.json similarity index 100% rename from blocks/tabs-solutions/metadata.json rename to blocks/tabs/metadata.json diff --git a/blocks/tabs-solutions/tabs-solutions.css b/blocks/tabs/tabs.css similarity index 100% rename from blocks/tabs-solutions/tabs-solutions.css rename to blocks/tabs/tabs.css diff --git a/blocks/tabs-solutions/tabs-solutions.js b/blocks/tabs/tabs.js similarity index 100% rename from blocks/tabs-solutions/tabs-solutions.js rename to blocks/tabs/tabs.js diff --git a/blocks/video-feature/metadata.json b/blocks/video/metadata.json similarity index 100% rename from blocks/video-feature/metadata.json rename to blocks/video/metadata.json diff --git a/blocks/video-feature/video-feature.css b/blocks/video/video.css similarity index 76% rename from blocks/video-feature/video-feature.css rename to blocks/video/video.css index 4e0b71b..40ae092 100644 --- a/blocks/video-feature/video-feature.css +++ b/blocks/video/video.css @@ -1,23 +1,23 @@ /* - * Video Feature block + * Video block * Static poster + heading + description, two-column feature layout. * Values extracted from https://www.aig.com/home (.aig-video). */ -.video-feature { +.video { margin: 32px 0 24px; color: var(--text-color); } /* single row wraps a single cell holding poster + h3 + description */ -.video-feature > div > div { +.video > div > div { display: flex; flex-direction: column; gap: 24px; } /* --- Poster (image + play affordance) --- */ -.video-feature p.video-feature-poster { +.video p.video-poster { position: relative; margin: 0; aspect-ratio: 5 / 3; @@ -26,20 +26,20 @@ line-height: 0; } -.video-feature p.video-feature-poster picture { +.video p.video-poster picture { display: block; width: 100%; height: 100%; } -.video-feature p.video-feature-poster img { +.video p.video-poster img { width: 100%; height: 100%; object-fit: cover; } /* "Play Video" label bottom-right, navy background */ -.video-feature p.video-feature-poster::after { +.video p.video-poster::after { content: "Play Video \25B6"; position: absolute; right: 0; @@ -55,7 +55,7 @@ } /* --- Text --- */ -.video-feature h3 { +.video h3 { margin: 0; color: var(--heading-color); font-family: var(--heading-font-family); @@ -64,11 +64,11 @@ line-height: 1.28; } -.video-feature .video-feature-poster + h3 { +.video .video-poster + h3 { margin-top: 0; } -.video-feature p:not(.video-feature-poster) { +.video p:not(.video-poster) { margin: 16px 0 0; color: var(--text-color); font-family: var(--body-font-family); @@ -77,7 +77,7 @@ } @media (width >= 900px) { - .video-feature > div > div { + .video > div > div { display: grid; grid-template-columns: 1fr 1fr; align-items: center; @@ -85,14 +85,14 @@ } /* poster spans left column, full height of the row */ - .video-feature p.video-feature-poster { + .video p.video-poster { grid-row: 1 / span 2; grid-column: 1; align-self: stretch; aspect-ratio: 5 / 3; } - .video-feature h3 { + .video h3 { grid-row: 1; grid-column: 2; align-self: end; @@ -101,14 +101,14 @@ line-height: 36px; } - .video-feature p:not(.video-feature-poster) { + .video p:not(.video-poster) { grid-row: 2; grid-column: 2; align-self: start; padding-left: 48px; } - .video-feature p.video-feature-poster::after { + .video p.video-poster::after { font-size: 20px; } } diff --git a/blocks/video-feature/video-feature.js b/blocks/video/video.js similarity index 95% rename from blocks/video-feature/video-feature.js rename to blocks/video/video.js index 9f35fa7..15bd4dc 100644 --- a/blocks/video-feature/video-feature.js +++ b/blocks/video/video.js @@ -117,7 +117,7 @@ export default async function decorate(block) { const media = block.querySelector('picture'); if (media) { const mediaWrapper = media.closest('p') || media.parentElement; - if (mediaWrapper) mediaWrapper.classList.add('video-feature-poster'); + if (mediaWrapper) mediaWrapper.classList.add('video-poster'); } return; } @@ -129,13 +129,13 @@ export default async function decorate(block) { if (placeholder) { block.classList.add('placeholder'); const wrapper = document.createElement('div'); - wrapper.className = 'video-feature-placeholder'; + wrapper.className = 'video-placeholder'; wrapper.append(placeholder); if (!autoplay) { wrapper.insertAdjacentHTML( 'beforeend', - '
', + '
', ); wrapper.addEventListener('click', () => { wrapper.remove(); diff --git a/drafts/kiran/index.html b/drafts/kiran/index.html new file mode 100644 index 0000000..7272563 --- /dev/null +++ b/drafts/kiran/index.html @@ -0,0 +1,6 @@ + + +
+
AIG

AIG Reports Excellent First Quarter 2026 Results

AIG is delivering on the ambitious three-year plan and guidance that we outlined at our Investor Day in 2025, supporting our clients, executing strategic initiatives with pace, and advancing our AI strategy. Prasad Demo

Learn more

Eric Anderson interviewed by Yahoo! Finance

Eric Andersen Talks with Yahoo! Finance

AIG President & Chief Executive Officer Eric Andersen discusses the evolving risk landscape and priorities for AIG.

Watch the video

AIG Women's open trophy on the golf green

Celebrate the 2026 AIG Women's Open

AIG is proud to support the incredible athletes inspiring the next generation of golf champions.

Read more

About AIG

We are American International Group, Inc, (AIG), a leading global insurance organization providing a wide range of property casualty insurance and other financial services. We provide world-class products and expertise to businesses and individuals in more than 200 countries and jurisdictions through AIG operations, licenses and authorizations as well as network partners. And we are committed to using our insights and thought leadership to not only manage risks, but to make real positive differences in every community we serve. Get to know us better.

Individuals

Explore our industry-leading solutions for individuals, from travel and personal accident insurance to coverage for Private Clients.

Discover product & services

Businesses

Discover how we're helping businesses identify emerging challenges and reduce risk, so they can reach their full potential.

Discover product & services

Risk Managers

Explore the products and tools we offer to help build an effective risk management program.

Discover products & services Multinational Log In

Brokers & Agents

Learn why AIG is the best partner to develop market-leading risk solutions for our clients.

Discover products & services Log In now

style

paleblue

AIG Performance & Initiatives

Eric Andersen

President and CEO Eric Andersen Affirms AIG's Strategy in Message to Clients and Partners

Eric Andersen discusses opportunities for AIG's next chapter in support of our valued clients and trusted partners.

Leaders meet at the AIG Client Forum in London

AIG Client Forum London

AIG leaders hosted clients in London for a three-day forum as part of our commitment to help them navigate complex risks and capture new opportunities.

Watch the video

Investor Day 2025

AIG Investor Day 2025

The CEOs of Palantir and Anthropic join Peter Zaffino and CNBC's Sara Eisen for a discussion on how AI is reshaping insurance.

Watch the video

AIG Newsroom

Building Resilience in a Rapidly Changing Landscape

Building Resilience in a Rapidly Changing Landscape

At AIG's North America Client Summit, our leaders underscored the importance of AIG's technical expertise to help clients make forward-looking insurance decisions.

Watch the video

View all stories

Explore AIG Careers around the world

Find your place on the diverse team of experts and move your career—and world—forward.

View Careers

Title

AIG Insurance Home | AIG US

Description

American International Group, Inc, (AIG), is a global insurance organization providing a range of insurance and other financial services. Get to know us better.

Image

+
+ From 2962bd8202f7f3e95b370683d63cd7732266c87e Mon Sep 17 00:00:00 2001 From: Kiran Murugulla Date: Wed, 22 Jul 2026 12:34:01 -0400 Subject: [PATCH 5/9] refactor: remove unnecessary variants, make styles default MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove story variant from cards, make it the default style - Remove feature variant from columns, make it the default style - Fix tabs block class names (tabs-solutions → tabs) - All blocks now use simple class names without variants 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- blocks/cards/cards.css | 93 +++++++++++++------------------------- blocks/columns/columns.css | 71 ++++++++--------------------- blocks/tabs/tabs.css | 52 ++++++++++----------- blocks/tabs/tabs.js | 10 ++-- 4 files changed, 81 insertions(+), 145 deletions(-) diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 7454408..aca4efa 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -1,39 +1,10 @@ -/* Default cards variant */ +/* Cards - horizontal cards with image left, content right */ .cards > ul { - list-style: none; - margin: 0; - padding: 0; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(257px, 1fr)); - gap: 24px; -} - -.cards > ul > li { - border: 1px solid #dadada; - background-color: var(--background-color); -} - -.cards .cards-card-body { - margin: 16px; -} - -.cards .cards-card-image { - line-height: 0; -} - -.cards > ul > li img { - width: 100%; - aspect-ratio: 4 / 3; - object-fit: cover; -} - -/* Story variant - horizontal cards with image left, content right */ -.cards.story > ul { grid-template-columns: 1fr; gap: 32px; } -.cards.story > ul > li { +.cards > ul > li { display: flex; flex-direction: row; align-items: flex-start; @@ -42,29 +13,29 @@ border: 0; } -.cards.story .cards-card-image { +.cards .cards-card-image { flex: 0 0 auto; line-height: 0; } -.cards.story .cards-card-image picture, -.cards.story .cards-card-image img { +.cards .cards-card-image picture, +.cards .cards-card-image img { display: block; } -.cards.story .cards-card-image img { +.cards .cards-card-image img { width: 190px; height: 190px; object-fit: cover; } -.cards.story .cards-card-body { +.cards .cards-card-body { flex: 1 1 auto; } -.cards.story .cards-card-body h2, -.cards.story .cards-card-body h3, -.cards.story .cards-card-body h4 { +.cards .cards-card-body h2, +.cards .cards-card-body h3, +.cards .cards-card-body h4 { margin: 0 0 16px; padding: 0; color: var(--heading-color); @@ -74,31 +45,31 @@ line-height: 30px; } -.cards.story .cards-card-body h2 a:any-link, -.cards.story .cards-card-body h3 a:any-link, -.cards.story .cards-card-body h4 a:any-link { +.cards .cards-card-body h2 a:any-link, +.cards .cards-card-body h3 a:any-link, +.cards .cards-card-body h4 a:any-link { color: inherit; text-decoration: none; } -.cards.story .cards-card-body h2 a:hover, -.cards.story .cards-card-body h3 a:hover, -.cards.story .cards-card-body h4 a:hover { +.cards .cards-card-body h2 a:hover, +.cards .cards-card-body h3 a:hover, +.cards .cards-card-body h4 a:hover { text-decoration: underline; } -.cards.story .cards-card-body p { +.cards .cards-card-body p { margin: 0 0 16px; color: var(--heading-color); font-size: 20px; line-height: 28px; } -.cards.story .cards-card-body p:last-child { +.cards .cards-card-body p:last-child { margin-bottom: 0; } -.cards.story .cards-card-body p:last-child a:any-link { +.cards .cards-card-body p:last-child a:any-link { display: inline-block; color: var(--link-color); font-family: var(--heading-font-family); @@ -108,7 +79,7 @@ text-decoration: none; } -.cards.story .cards-card-body p:last-child a:any-link::after { +.cards .cards-card-body p:last-child a:any-link::after { content: ""; display: inline-block; width: 1.1em; @@ -118,13 +89,13 @@ mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; } -.cards.story .cards-card-body p:last-child a:hover { +.cards .cards-card-body p:last-child a:hover { color: var(--link-hover-color); text-decoration: none; } @media (width >= 900px) { - .cards.story > ul { + .cards > ul { grid-template-columns: 1fr 1fr; gap: 24px 48px; } @@ -132,46 +103,46 @@ /* Story variant with paleblue section - large full-width cards */ @media (width >= 900px) { - .section.paleblue .cards.story > ul { + .section.paleblue .cards > ul { grid-template-columns: 1fr; gap: 24px; } - .section.paleblue .cards.story > ul > li { + .section.paleblue .cards > ul > li { align-items: center; gap: 48px; } - .section.paleblue .cards.story > ul > li:nth-child(odd) { + .section.paleblue .cards > ul > li:nth-child(odd) { flex-direction: row-reverse; } - .section.paleblue .cards.story .cards-card-image { + .section.paleblue .cards .cards-card-image { flex: 1 1 55%; max-width: 55%; } - .section.paleblue .cards.story .cards-card-image img { + .section.paleblue .cards .cards-card-image img { width: 100%; height: auto; aspect-ratio: 646 / 283; object-fit: cover; } - .section.paleblue .cards.story .cards-card-body { + .section.paleblue .cards .cards-card-body { flex: 1 1 45%; } - .section.paleblue .cards.story .cards-card-body h2, - .section.paleblue .cards.story .cards-card-body h3, - .section.paleblue .cards.story .cards-card-body h4 { + .section.paleblue .cards .cards-card-body h2, + .section.paleblue .cards .cards-card-body h3, + .section.paleblue .cards .cards-card-body h4 { font-family: var(--heading-font-family); font-weight: 500; font-size: 28px; line-height: 36px; } - .section.paleblue .cards.story .cards-card-body p { + .section.paleblue .cards .cards-card-body p { color: var(--text-color); line-height: 30px; } diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 4a63c40..1f19f93 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -1,52 +1,17 @@ -/* Default columns variant */ -.columns > div { - display: flex; - flex-direction: column; -} - +/* Columns - styled columns for featured content */ .columns img { - width: 100%; -} - -.columns > div > div { - order: 1; -} - -.columns > div > .columns-img-col { - order: 0; -} - -.columns > div > .columns-img-col img { - display: block; -} - -@media (width >= 900px) { - .columns > div { - align-items: center; - flex-direction: unset; - gap: 24px; - } - - .columns > div > div { - flex: 1; - order: unset; - } -} - -/* Feature variant - styled columns for featured content */ -.columns.feature img { display: block; width: 100%; } /* Feature variant: 1 column - centered intro/about section */ -.columns.feature.columns-1-cols > div { +.columns.columns-1-cols > div { max-width: 950px; margin: 0 auto; text-align: center; } -.columns.feature.columns-1-cols h2 { +.columns.columns-1-cols h2 { margin: 0 0 16px; color: var(--heading-color); font-size: 44px; @@ -55,7 +20,7 @@ text-align: center; } -.columns.feature.columns-1-cols p { +.columns.columns-1-cols p { margin: 0 0 15px; color: var(--text-color); font-size: 20px; @@ -64,31 +29,31 @@ text-align: center; } -.columns.feature.columns-1-cols a:any-link { +.columns.columns-1-cols a:any-link { color: var(--link-color); font-weight: 400; text-decoration: underline; } /* Feature variant: 2 columns - featured story with background */ -.columns.feature.columns-2-cols > div { +.columns.columns-2-cols > div { background-color: var(--light-color); } -.columns.feature.columns-2-cols > div > div { +.columns.columns-2-cols > div > div { padding: 32px; } -.columns.feature.columns-2-cols > div > .columns-img-col { +.columns.columns-2-cols > div > .columns-img-col { padding: 0; } -.columns.feature.columns-2-cols .columns-img-col img { +.columns.columns-2-cols .columns-img-col img { height: 100%; object-fit: cover; } -.columns.feature.columns-2-cols h3 { +.columns.columns-2-cols h3 { margin: 0 0 16px; color: var(--heading-color); font-size: 28px; @@ -96,16 +61,16 @@ line-height: 36px; } -.columns.feature.columns-2-cols h3 a:any-link { +.columns.columns-2-cols h3 a:any-link { color: var(--heading-color); text-decoration: none; } -.columns.feature.columns-2-cols h3 a:hover { +.columns.columns-2-cols h3 a:hover { text-decoration: underline; } -.columns.feature.columns-2-cols p { +.columns.columns-2-cols p { margin: 0 0 15px; color: var(--text-color); font-size: 20px; @@ -113,30 +78,30 @@ line-height: 30px; } -.columns.feature.columns-2-cols p a:any-link { +.columns.columns-2-cols p a:any-link { color: var(--link-color); font-size: 20px; font-weight: 400; text-decoration: none; } -.columns.feature.columns-2-cols p a:hover { +.columns.columns-2-cols p a:hover { text-decoration: underline; } @media (width >= 900px) { - .columns.feature.columns-2-cols > div { + .columns.columns-2-cols > div { align-items: stretch; flex-direction: row; } - .columns.feature.columns-2-cols > div > div { + .columns.columns-2-cols > div > div { flex: 0 1 57%; order: 0; padding: 32px 58px 32px 32px; } - .columns.feature.columns-2-cols > div > .columns-img-col { + .columns.columns-2-cols > div > .columns-img-col { flex: 0 1 43%; order: 1; padding: 0; diff --git a/blocks/tabs/tabs.css b/blocks/tabs/tabs.css index 0948f43..bc54707 100644 --- a/blocks/tabs/tabs.css +++ b/blocks/tabs/tabs.css @@ -1,4 +1,4 @@ -/* tabs-solutions -- AIG "Risk Solutions" tab switcher. +/* tabs -- AIG "Risk Solutions" tab switcher. Values extracted from computed styles of www.aig.com/home .aig-tabs. Section pale-blue band is handled by .section.paleblue globally. */ @@ -8,7 +8,7 @@ /* stylelint-disable no-descending-specificity */ /* ---- Tablist (centered row of tabs) ---- */ -.tabs-solutions .tabs-solutions-list { +.tabs .tabs-list { display: flex; justify-content: center; flex-wrap: wrap; @@ -19,7 +19,7 @@ } /* ---- Tab labels (shared) ---- */ -.tabs-solutions .tabs-solutions-list button.tabs-solutions-tab { +.tabs .tabs-list button.tabs-tab { flex: 0 0 auto; margin: 0 12px; border: 0; @@ -38,24 +38,24 @@ transition: color 0.2s, border-color 0.2s; } -.tabs-solutions :where(.tabs-solutions-list button.tabs-solutions-tab) p { +.tabs :where(.tabs-list button.tabs-tab) p { margin: 0; } /* Inactive tab */ -.tabs-solutions .tabs-solutions-list button.tabs-solutions-tab[aria-selected='false'] { +.tabs .tabs-list button.tabs-tab[aria-selected='false'] { color: #5b5c60; } /* Active tab: brand link blue with underline indicator */ -.tabs-solutions .tabs-solutions-list button.tabs-solutions-tab[aria-selected='true'] { +.tabs .tabs-list button.tabs-tab[aria-selected='true'] { color: var(--link-color); border-bottom-color: var(--link-color); cursor: default; } /* ---- Tab panel (white content card, centered) ---- */ -.tabs-solutions .tabs-solutions-panel { +.tabs .tabs-panel { max-width: 930px; margin: 30px auto 15px; padding: 0; @@ -64,12 +64,12 @@ overflow: visible; } -.tabs-solutions .tabs-solutions-panel[aria-hidden='true'] { +.tabs .tabs-panel[aria-hidden='true'] { display: none; } /* Panel content wrapper: banner image sits flush, text gets padding */ -.tabs-solutions .tabs-solutions-panel > div > p { +.tabs .tabs-panel > div > p { margin: 0 0 16px; padding: 0 32px; color: var(--heading-color); @@ -78,23 +78,23 @@ } /* Banner image: full width, flush to card edges */ -.tabs-solutions .tabs-solutions-panel > div > p:first-child { +.tabs .tabs-panel > div > p:first-child { margin: 0; padding: 0; } -.tabs-solutions .tabs-solutions-panel img { +.tabs .tabs-panel img { width: 100%; object-fit: cover; } /* First (lead) description gets top spacing below the banner */ -.tabs-solutions .tabs-solutions-panel > div > p:nth-child(2) { +.tabs .tabs-panel > div > p:nth-child(2) { margin-top: 32px; } /* ---- Sub-teasers (Risk Managers / Brokers & Agents) ---- */ -.tabs-solutions .tabs-solutions-subteasers { +.tabs .tabs-subteasers { display: grid; grid-template-columns: 1fr; gap: 32px; @@ -102,11 +102,11 @@ padding: 0 32px; } -.tabs-solutions .tabs-solutions-subteaser > * { +.tabs .tabs-subteaser > * { padding: 0; } -.tabs-solutions .tabs-solutions-subteaser h3 { +.tabs .tabs-subteaser h3 { margin: 0 0 16px; color: var(--heading-color); font-family: var(--heading-font-family); @@ -115,7 +115,7 @@ line-height: 1.25; } -.tabs-solutions .tabs-solutions-subteaser p { +.tabs .tabs-subteaser p { margin: 0 0 16px; color: var(--heading-color); font-size: var(--body-font-size-m); @@ -123,8 +123,8 @@ } /* ---- CTA links: futura, blue, no underline (overrides global button/link styles) ---- */ -.tabs-solutions .tabs-solutions-panel a:any-link, -.tabs-solutions .tabs-solutions-panel a.button:any-link { +.tabs .tabs-panel a:any-link, +.tabs .tabs-panel a.button:any-link { display: inline; padding: 0; border: 0; @@ -136,34 +136,34 @@ text-decoration: none; } -.tabs-solutions .tabs-solutions-panel a:any-link:hover, -.tabs-solutions .tabs-solutions-panel a.button:any-link:hover { +.tabs .tabs-panel a:any-link:hover, +.tabs .tabs-panel a.button:any-link:hover { color: var(--link-hover-color); text-decoration: none; } /* Heading link inside sub-teaser stays navy */ -.tabs-solutions .tabs-solutions-subteaser h3 a:where(:any-link) { +.tabs .tabs-subteaser h3 a:where(:any-link) { color: var(--heading-color); font-family: var(--heading-font-family); } /* Row of two CTA links stacks vertically (specificity must beat the - `.tabs-solutions-panel a:any-link { display: inline }` rule above) */ -.tabs-solutions .tabs-solutions-panel > div > p a:any-link + a:any-link, -.tabs-solutions .tabs-solutions-subteaser p a:any-link + a:any-link { + `.tabs-panel a:any-link { display: inline }` rule above) */ +.tabs .tabs-panel > div > p a:any-link + a:any-link, +.tabs .tabs-subteaser p a:any-link + a:any-link { display: block; margin-top: 8px; } /* ---- Desktop layout ---- */ @media (width >= 900px) { - .tabs-solutions .tabs-solutions-list button.tabs-solutions-tab { + .tabs .tabs-list button.tabs-tab { margin: 0 22px; padding: 15px 3px 26px; } - .tabs-solutions .tabs-solutions-subteasers { + .tabs .tabs-subteasers { grid-template-columns: 1fr 1fr; gap: 83px; } diff --git a/blocks/tabs/tabs.js b/blocks/tabs/tabs.js index 2f74033..7485b25 100644 --- a/blocks/tabs/tabs.js +++ b/blocks/tabs/tabs.js @@ -4,7 +4,7 @@ import { toClassName } from '../../scripts/aem.js'; export default async function decorate(block) { // build tablist const tablist = document.createElement('div'); - tablist.className = 'tabs-solutions-list'; + tablist.className = 'tabs-list'; tablist.setAttribute('role', 'tablist'); // decorate tabs and tabpanels @@ -14,7 +14,7 @@ export default async function decorate(block) { // decorate tabpanel const tabpanel = block.children[i]; - tabpanel.className = 'tabs-solutions-panel'; + tabpanel.className = 'tabs-panel'; tabpanel.id = `tabpanel-${id}`; tabpanel.setAttribute('aria-hidden', !!i); tabpanel.setAttribute('aria-labelledby', `tab-${id}`); @@ -22,7 +22,7 @@ export default async function decorate(block) { // build tab button const button = document.createElement('button'); - button.className = 'tabs-solutions-tab'; + button.className = 'tabs-tab'; button.id = `tab-${id}`; button.innerHTML = tab.innerHTML; @@ -51,10 +51,10 @@ export default async function decorate(block) { const headings = [...content.querySelectorAll(':scope > h3')]; if (headings.length) { const grid = document.createElement('div'); - grid.className = 'tabs-solutions-subteasers'; + grid.className = 'tabs-subteasers'; headings.forEach((h3) => { const teaser = document.createElement('div'); - teaser.className = 'tabs-solutions-subteaser'; + teaser.className = 'tabs-subteaser'; let node = h3; const group = []; // collect this heading and following siblings until the next h3 From c1453565b8baba717e7a296b2636f8c08cb85c2d Mon Sep 17 00:00:00 2001 From: Kiran Murugulla Date: Wed, 22 Jul 2026 12:40:20 -0400 Subject: [PATCH 6/9] fix: restore missing base styles to cards and columns blocks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When removing variants, accidentally removed all base CSS including critical layout properties. This restores the essential base styles: - cards: list-style, margin, padding, display grid - columns: flexbox layout, order properties, responsive rules Also removes the now-unused variant block folders. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- blocks/cards-story/cards-story.css | 170 ------------------- blocks/cards-story/cards-story.js | 17 -- blocks/cards-story/metadata.json | 38 ----- blocks/cards/cards.css | 4 + blocks/columns-feature/columns-feature.css | 135 --------------- blocks/columns-feature/columns-feature.js | 18 -- blocks/columns-feature/metadata.json | 38 ----- blocks/columns/columns.css | 34 +++- blocks/hero-banner/hero-banner.css | 182 --------------------- blocks/hero-banner/hero-banner.js | 5 - blocks/hero-banner/metadata.json | 38 ----- 11 files changed, 36 insertions(+), 643 deletions(-) delete mode 100644 blocks/cards-story/cards-story.css delete mode 100644 blocks/cards-story/cards-story.js delete mode 100644 blocks/cards-story/metadata.json delete mode 100644 blocks/columns-feature/columns-feature.css delete mode 100644 blocks/columns-feature/columns-feature.js delete mode 100644 blocks/columns-feature/metadata.json delete mode 100644 blocks/hero-banner/hero-banner.css delete mode 100644 blocks/hero-banner/hero-banner.js delete mode 100644 blocks/hero-banner/metadata.json diff --git a/blocks/cards-story/cards-story.css b/blocks/cards-story/cards-story.css deleted file mode 100644 index 7c119e9..0000000 --- a/blocks/cards-story/cards-story.css +++ /dev/null @@ -1,170 +0,0 @@ -/* Block: cards-story — CSS derived from AIG homepage teaser computed styles */ - -/* --------------------------------------------------------------------------- - DEFAULT VARIANT — compact two-up "story" teasers - (AIG .teaserflex.teaser — square image left, content right, 2 across) - --------------------------------------------------------------------------- */ - -.cards-story > ul { - list-style: none; - margin: 0; - padding: 0; - display: grid; - grid-template-columns: 1fr; - gap: 32px; -} - -.cards-story > ul > li { - display: flex; - flex-direction: row; - align-items: flex-start; - gap: 24px; - background-color: transparent; - border: 0; -} - -.cards-story .cards-story-card-image { - flex: 0 0 auto; - line-height: 0; -} - -.cards-story .cards-story-card-image picture, -.cards-story .cards-story-card-image img { - display: block; -} - -.cards-story .cards-story-card-image img { - width: 190px; - height: 190px; - object-fit: cover; -} - -.cards-story .cards-story-card-body { - flex: 1 1 auto; -} - -/* Heading — futura navy, 24px */ -.cards-story .cards-story-card-body h2, -.cards-story .cards-story-card-body h3, -.cards-story .cards-story-card-body h4 { - margin: 0 0 16px; - padding: 0; - color: var(--heading-color); - font-family: var(--heading-font-family); - font-weight: 400; - font-size: 24px; - line-height: 30px; -} - -.cards-story .cards-story-card-body h2 a:any-link, -.cards-story .cards-story-card-body h3 a:any-link, -.cards-story .cards-story-card-body h4 a:any-link { - color: inherit; - text-decoration: none; -} - -.cards-story .cards-story-card-body h2 a:hover, -.cards-story .cards-story-card-body h3 a:hover, -.cards-story .cards-story-card-body h4 a:hover { - text-decoration: underline; -} - -/* Description paragraph — 20px, brand navy (source "corebluetext") */ -.cards-story .cards-story-card-body p { - margin: 0 0 16px; - color: var(--heading-color); - font-size: 20px; - line-height: 28px; -} - -/* CTA link — futura medium, brand blue, arrow suffix, no underline */ -.cards-story .cards-story-card-body p:last-child { - margin-bottom: 0; -} - -.cards-story .cards-story-card-body p:last-child a:any-link { - display: inline-block; - color: var(--link-color); - font-family: var(--heading-font-family); - font-weight: 500; - font-size: 20px; - line-height: 36px; - text-decoration: none; -} - -.cards-story .cards-story-card-body p:last-child a:any-link::after { - content: ""; - display: inline-block; - width: 1.1em; - height: 0.7em; - margin-left: 0.4em; - background-color: currentcolor; - mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; -} - -.cards-story .cards-story-card-body p:last-child a:hover { - color: var(--link-hover-color); - text-decoration: none; -} - -/* Two-up side-by-side on tablet/desktop */ -@media (width >= 900px) { - .cards-story > ul { - grid-template-columns: 1fr 1fr; - gap: 24px 48px; - } -} - -/* --------------------------------------------------------------------------- - PALEBLUE SECTION VARIANT — large "cta-with-image" teasers - (full-width cards stacked, large image beside text, alternating sides) - --------------------------------------------------------------------------- */ - -@media (width >= 900px) { - .section.paleblue .cards-story > ul { - grid-template-columns: 1fr; - gap: 24px; - } - - .section.paleblue .cards-story > ul > li { - align-items: center; - gap: 48px; - } - - /* alternate image side: odd cards get image on the right (matches source) */ - .section.paleblue .cards-story > ul > li:nth-child(odd) { - flex-direction: row-reverse; - } - - .section.paleblue .cards-story .cards-story-card-image { - flex: 1 1 55%; - max-width: 55%; - } - - .section.paleblue .cards-story .cards-story-card-image img { - width: 100%; - height: auto; - aspect-ratio: 646 / 283; - object-fit: cover; - } - - .section.paleblue .cards-story .cards-story-card-body { - flex: 1 1 45%; - } - - /* larger heading for the big teasers */ - .section.paleblue .cards-story .cards-story-card-body h2, - .section.paleblue .cards-story .cards-story-card-body h3, - .section.paleblue .cards-story .cards-story-card-body h4 { - font-family: var(--heading-font-family); - font-weight: 500; - font-size: 28px; - line-height: 36px; - } - - /* body text in the big teasers uses standard text color */ - .section.paleblue .cards-story .cards-story-card-body p { - color: var(--text-color); - line-height: 30px; - } -} diff --git a/blocks/cards-story/cards-story.js b/blocks/cards-story/cards-story.js deleted file mode 100644 index 1f5458c..0000000 --- a/blocks/cards-story/cards-story.js +++ /dev/null @@ -1,17 +0,0 @@ -import { createOptimizedPicture } from '../../scripts/aem.js'; - -export default function decorate(block) { - /* change to ul, li */ - const ul = document.createElement('ul'); - [...block.children].forEach((row) => { - const li = document.createElement('li'); - while (row.firstElementChild) li.append(row.firstElementChild); - [...li.children].forEach((div) => { - if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-story-card-image'; - else div.className = 'cards-story-card-body'; - }); - ul.append(li); - }); - ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]))); - block.replaceChildren(ul); -} diff --git a/blocks/cards-story/metadata.json b/blocks/cards-story/metadata.json deleted file mode 100644 index 031217e..0000000 --- a/blocks/cards-story/metadata.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "variantName": "cards-story", - "baseBlock": "cards", - "version": "1.0.0", - "created": "2026-07-16T15:02:00.000Z", - "sourceContext": { - "originUrl": "https://www.aig.com/home", - "originPage": "AIG corporate homepage", - "blockPosition": "middle" - }, - "visualCharacteristics": { - "colorScheme": "light", - "density": "spacious", - "purpose": "story", - "imagePattern": "large" - }, - "contentPattern": { - "structure": "image + title + description + CTA", - "buttonCount": 1, - "imageCount": 1 - }, - "reuseGuidance": { - "suitableFor": [ - "featured story teasers with images", - "feature/initiative highlight grids", - "newsroom or promo teaser rows with image + title + description + CTA" - ], - "notSuitableFor": [ - "single featured item (use columns)", - "text-only card lists (use cards no-images)" - ] - }, - "usage": { - "pagesUsing": ["/home"], - "reuseCount": 2, - "lastUsed": "2026-07-16T15:02:00.000Z" - } -} diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index aca4efa..37c7f86 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -1,5 +1,9 @@ /* Cards - horizontal cards with image left, content right */ .cards > ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; grid-template-columns: 1fr; gap: 32px; } diff --git a/blocks/columns-feature/columns-feature.css b/blocks/columns-feature/columns-feature.css deleted file mode 100644 index 0d6cbb8..0000000 --- a/blocks/columns-feature/columns-feature.css +++ /dev/null @@ -1,135 +0,0 @@ -/* Block: columns-feature -- CSS from source computed styles (https://www.aig.com/home) */ - -/* --------------------------------------------------------------------------- - Base column layout (shared): stack on mobile, image column first. - --------------------------------------------------------------------------- */ -.columns-feature > div { - display: flex; - flex-direction: column; -} - -.columns-feature img { - display: block; - width: 100%; -} - -.columns-feature > div > div { - order: 1; -} - -.columns-feature > div > .columns-feature-img-col { - order: 0; -} - -/* --------------------------------------------------------------------------- - Variant: 1 column -- "About AIG" centered intro - Narrow, centered column with centered heading + prose. - --------------------------------------------------------------------------- */ -.columns-feature.columns-feature-1-cols > div { - max-width: 950px; - margin: 0 auto; - text-align: center; -} - -.columns-feature.columns-feature-1-cols h2 { - margin: 0 0 16px; - color: var(--heading-color); - font-size: 44px; - font-weight: 500; - line-height: 56px; - text-align: center; -} - -.columns-feature.columns-feature-1-cols p { - margin: 0 0 15px; - color: var(--text-color); - font-size: 20px; - font-weight: 400; - line-height: 30px; - text-align: center; -} - -.columns-feature.columns-feature-1-cols a:any-link { - color: var(--link-color); - font-weight: 400; - text-decoration: underline; -} - -/* --------------------------------------------------------------------------- - Variant: 2 columns -- Newsroom featured story (image right, light-blue bg) - --------------------------------------------------------------------------- */ -.columns-feature.columns-feature-2-cols > div { - background-color: var(--light-color); -} - -.columns-feature.columns-feature-2-cols > div > div { - padding: 32px; -} - -.columns-feature.columns-feature-2-cols > div > .columns-feature-img-col { - padding: 0; -} - -.columns-feature.columns-feature-2-cols .columns-feature-img-col img { - height: 100%; - object-fit: cover; -} - -.columns-feature.columns-feature-2-cols h3 { - margin: 0 0 16px; - color: var(--heading-color); - font-size: 28px; - font-weight: 500; - line-height: 36px; -} - -.columns-feature.columns-feature-2-cols h3 a:any-link { - color: var(--heading-color); - text-decoration: none; -} - -.columns-feature.columns-feature-2-cols h3 a:hover { - text-decoration: underline; -} - -.columns-feature.columns-feature-2-cols p { - margin: 0 0 15px; - color: var(--text-color); - font-size: 20px; - font-weight: 400; - line-height: 30px; -} - -.columns-feature.columns-feature-2-cols p a:any-link { - color: var(--link-color); - font-size: 20px; - font-weight: 400; - text-decoration: none; -} - -.columns-feature.columns-feature-2-cols p a:hover { - text-decoration: underline; -} - -/* --------------------------------------------------------------------------- - Desktop layout (>= 900px) - --------------------------------------------------------------------------- */ -@media (width >= 900px) { - .columns-feature.columns-feature-2-cols > div { - align-items: stretch; - flex-direction: row; - } - - /* image column ~43%, text column ~57% (source 502px : 673px); image on the right */ - .columns-feature.columns-feature-2-cols > div > div { - flex: 0 1 57%; - order: 0; - padding: 32px 58px 32px 32px; - } - - .columns-feature.columns-feature-2-cols > div > .columns-feature-img-col { - flex: 0 1 43%; - order: 1; - padding: 0; - } -} diff --git a/blocks/columns-feature/columns-feature.js b/blocks/columns-feature/columns-feature.js deleted file mode 100644 index c227061..0000000 --- a/blocks/columns-feature/columns-feature.js +++ /dev/null @@ -1,18 +0,0 @@ -export default function decorate(block) { - const cols = [...block.firstElementChild.children]; - block.classList.add(`columns-feature-${cols.length}-cols`); - - // setup image columns - [...block.children].forEach((row) => { - [...row.children].forEach((col) => { - const pic = col.querySelector('picture'); - if (pic) { - const picWrapper = pic.closest('div'); - if (picWrapper && picWrapper.children.length === 1) { - // picture is only content in column - picWrapper.classList.add('columns-feature-img-col'); - } - } - }); - }); -} diff --git a/blocks/columns-feature/metadata.json b/blocks/columns-feature/metadata.json deleted file mode 100644 index 9c4c361..0000000 --- a/blocks/columns-feature/metadata.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "variantName": "columns-feature", - "baseBlock": "columns", - "version": "1.0.0", - "created": "2026-07-16T15:02:00.000Z", - "sourceContext": { - "originUrl": "https://www.aig.com/home", - "originPage": "AIG corporate homepage", - "blockPosition": "middle" - }, - "visualCharacteristics": { - "colorScheme": "light", - "density": "spacious", - "purpose": "feature", - "imagePattern": "large" - }, - "contentPattern": { - "structure": "text column + image column (or single centered text column)", - "buttonCount": 2, - "imageCount": 1 - }, - "reuseGuidance": { - "suitableFor": [ - "single featured story with image beside text", - "centered single-column intro/about prose", - "general side-by-side informational content" - ], - "notSuitableFor": [ - "repeating grids of distinct items (use cards)", - "interactive switchable content (use tabs)" - ] - }, - "usage": { - "pagesUsing": ["/home"], - "reuseCount": 2, - "lastUsed": "2026-07-16T15:02:00.000Z" - } -} diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index 1f19f93..be14bd4 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -1,10 +1,40 @@ /* Columns - styled columns for featured content */ +.columns > div { + display: flex; + flex-direction: column; +} + .columns img { display: block; width: 100%; } -/* Feature variant: 1 column - centered intro/about section */ +.columns > div > div { + order: 1; +} + +.columns > div > .columns-img-col { + order: 0; +} + +.columns > div > .columns-img-col img { + display: block; +} + +@media (width >= 900px) { + .columns > div { + align-items: center; + flex-direction: unset; + gap: 24px; + } + + .columns > div > div { + flex: 1; + order: unset; + } +} + +/* 1 column - centered intro/about section */ .columns.columns-1-cols > div { max-width: 950px; margin: 0 auto; @@ -35,7 +65,7 @@ text-decoration: underline; } -/* Feature variant: 2 columns - featured story with background */ +/* 2 columns - featured story with background */ .columns.columns-2-cols > div { background-color: var(--light-color); } diff --git a/blocks/hero-banner/hero-banner.css b/blocks/hero-banner/hero-banner.css deleted file mode 100644 index 45f6f50..0000000 --- a/blocks/hero-banner/hero-banner.css +++ /dev/null @@ -1,182 +0,0 @@ -/* Block: hero-banner - Full-bleed background-image banner with a navy left-to-right fade and - overlaid white heading + description + white-bordered CTA. - Values extracted from www.aig.com/home (.hero-banner-with-fade). */ - -/* Full-width: escape the .section max-width/padding */ -.hero-banner-container .hero-banner-wrapper { - max-width: unset; - padding: 0; -} - -/* Decorated DOM: - .hero-banner.block - > div (row 1) > div (cell) > picture > img -- background image - > div (row 2) > div (cell) > h1|h2, p, p>a -- overlay text */ -.hero-banner { - position: relative; - min-height: 320px; - overflow: hidden; -} - -.hero-banner picture { - position: absolute; - inset: 0; -} - -.hero-banner img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: 50% 50%; -} - -/* Row 1: the image cell, absolutely positioned to fill the block */ -.hero-banner > div:first-child { - position: absolute; - inset: 0; - margin: 0; - display: block; - height: 100%; - width: 100%; -} - -/* Navy left-to-right fade over the image (source: .cmp-teaser__image::after) - linear-gradient(90deg, #001871 0%, #001871 60%, transparent 100%) */ -.hero-banner::before { - content: ''; - position: absolute; - inset: 0; - z-index: 1; - - /* Mobile: near-solid navy so full-width text stays legible */ - background-image: linear-gradient( - 90deg, - var(--heading-color) 0%, - var(--heading-color) 70%, - rgb(0 24 113 / 55%) 100% - ); - pointer-events: none; -} - -/* Row 2: the text overlay, sits above the fade */ -.hero-banner > div:last-child { - position: relative; - z-index: 2; - margin: 0; - display: flex; - flex-direction: column; - justify-content: center; - min-height: 320px; - box-sizing: border-box; - padding: 32px 24px; -} - -.hero-banner > div:last-child > div { - width: 100%; -} - -/* Row 1 inner cell fills its absolute parent */ -.hero-banner > div:first-child > div { - display: block; - height: 100%; - width: 100%; -} - -/* Fallback when no image is authored: solid navy band */ -.hero-banner.no-image { - background-color: var(--heading-color); -} - -.hero-banner.no-image > div:first-child, -.hero-banner.no-image::before { - display: none; -} - -/* Heading (H1 top hero / H2 careers) -- 44px / 56px, white */ -.hero-banner h1, -.hero-banner h2 { - margin: 0 0 32px; - color: #fff; - font-size: var(--heading-size-xxl, 44px); - font-weight: 500; - line-height: 1.27; -} - -.hero-banner h1 a:any-link, -.hero-banner h2 a:any-link { - color: #fff; - text-decoration: none; -} - -/* Description -- 20px / 30px, white */ -.hero-banner p { - margin: 0 0 15px; - color: #fff; - font-size: var(--body-font-size-m, 20px); - line-height: 1.5; -} - -/* CTA: white-bordered box button (source .cmp-teaser__action-link). - EDS does NOT add a .button class to this link, so target the paragraph - link directly. Overrides both the global a:any-link and a.button resets. */ -.hero-banner > div:last-child p a:any-link, -main .hero-banner a.button:any-link { - display: inline-block; - margin: 8px 0 0; - border: 1px solid #fff; - border-radius: 0; - padding: 16px; - background: transparent; - color: #fff; - font-family: var(--heading-font-family); - font-size: var(--body-font-size-xs, 16px); - font-weight: 500; - line-height: 1.125; - text-decoration: none; - white-space: nowrap; -} - -.hero-banner > div:last-child p a:any-link:hover, -.hero-banner > div:last-child p a:any-link:focus-visible, -main .hero-banner a.button:any-link:hover, -main .hero-banner a.button:any-link:focus-visible { - background: #fff; - color: var(--heading-color); - text-decoration: none; -} - -/* Desktop: overlay confined to the left ~49%, inset ~8.3% from the left edge */ -@media (width >= 900px) { - .hero-banner { - min-height: 421px; - } - - /* Desktop: navy left-to-right fade -- solid ~45%, clear by ~75% - (source: .cmp-teaser__image::after) */ - .hero-banner::before { - background-image: linear-gradient( - 90deg, - var(--heading-color) 0%, - var(--heading-color) 45%, - rgb(0 24 113 / 0%) 75% - ); - } - - .hero-banner > div:last-child { - min-height: 421px; - max-width: 49%; - padding: 40px 0 40px 8.33%; - } - - .hero-banner h1, - .hero-banner h2 { - font-size: 44px; - line-height: 56px; - } - - .hero-banner p { - font-size: 20px; - line-height: 30px; - } -} diff --git a/blocks/hero-banner/hero-banner.js b/blocks/hero-banner/hero-banner.js deleted file mode 100644 index bda7af1..0000000 --- a/blocks/hero-banner/hero-banner.js +++ /dev/null @@ -1,5 +0,0 @@ -export default function decorate(block) { - if (!block.querySelector(':scope > div:first-child picture')) { - block.classList.add('no-image'); - } -} diff --git a/blocks/hero-banner/metadata.json b/blocks/hero-banner/metadata.json deleted file mode 100644 index 01f0b68..0000000 --- a/blocks/hero-banner/metadata.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "variantName": "hero-banner", - "baseBlock": "hero", - "version": "1.0.0", - "created": "2026-07-16T15:02:00.000Z", - "sourceContext": { - "originUrl": "https://www.aig.com/home", - "originPage": "AIG corporate homepage", - "blockPosition": "top" - }, - "visualCharacteristics": { - "colorScheme": "light", - "density": "minimal", - "purpose": "hero", - "imagePattern": "large" - }, - "contentPattern": { - "structure": "background image + heading + description + CTA", - "buttonCount": 1, - "imageCount": 1 - }, - "reuseGuidance": { - "suitableFor": [ - "full-width banner intros with a background photo", - "top-of-page hero banners", - "full-bleed call-to-action banners mid-page (e.g. careers CTA)" - ], - "notSuitableFor": [ - "text-only intros with no background image", - "repeating card-like content" - ] - }, - "usage": { - "pagesUsing": ["/home"], - "reuseCount": 2, - "lastUsed": "2026-07-16T15:02:00.000Z" - } -} From 493b7966db6472a041d999e8fa27b187aa968de8 Mon Sep 17 00:00:00 2001 From: Kiran Murugulla Date: Wed, 22 Jul 2026 12:50:02 -0400 Subject: [PATCH 7/9] style: improve responsive layout and remove variant class names MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change tabs panel max-width from 930px to 66% for better responsiveness - Remove variant class names (story, feature) from draft content - Blocks now use default styles without variant modifiers Matches production styling with responsive width constraints. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- blocks/tabs/tabs.css | 2 +- drafts/kiran/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/tabs/tabs.css b/blocks/tabs/tabs.css index bc54707..e054d68 100644 --- a/blocks/tabs/tabs.css +++ b/blocks/tabs/tabs.css @@ -56,7 +56,7 @@ /* ---- Tab panel (white content card, centered) ---- */ .tabs .tabs-panel { - max-width: 930px; + max-width: 66%; margin: 30px auto 15px; padding: 0; border: 0; diff --git a/drafts/kiran/index.html b/drafts/kiran/index.html index 7272563..0ab4315 100644 --- a/drafts/kiran/index.html +++ b/drafts/kiran/index.html @@ -1,6 +1,6 @@
-
AIG

AIG Reports Excellent First Quarter 2026 Results

AIG is delivering on the ambitious three-year plan and guidance that we outlined at our Investor Day in 2025, supporting our clients, executing strategic initiatives with pace, and advancing our AI strategy. Prasad Demo

Learn more

Eric Anderson interviewed by Yahoo! Finance

Eric Andersen Talks with Yahoo! Finance

AIG President & Chief Executive Officer Eric Andersen discusses the evolving risk landscape and priorities for AIG.

Watch the video

AIG Women's open trophy on the golf green

Celebrate the 2026 AIG Women's Open

AIG is proud to support the incredible athletes inspiring the next generation of golf champions.

Read more

About AIG

We are American International Group, Inc, (AIG), a leading global insurance organization providing a wide range of property casualty insurance and other financial services. We provide world-class products and expertise to businesses and individuals in more than 200 countries and jurisdictions through AIG operations, licenses and authorizations as well as network partners. And we are committed to using our insights and thought leadership to not only manage risks, but to make real positive differences in every community we serve. Get to know us better.

Individuals

Explore our industry-leading solutions for individuals, from travel and personal accident insurance to coverage for Private Clients.

Discover product & services

Businesses

Discover how we're helping businesses identify emerging challenges and reduce risk, so they can reach their full potential.

Discover product & services

Risk Managers

Explore the products and tools we offer to help build an effective risk management program.

Discover products & services Multinational Log In

Brokers & Agents

Learn why AIG is the best partner to develop market-leading risk solutions for our clients.

Discover products & services Log In now

style

paleblue

AIG Performance & Initiatives

Eric Andersen

President and CEO Eric Andersen Affirms AIG's Strategy in Message to Clients and Partners

Eric Andersen discusses opportunities for AIG's next chapter in support of our valued clients and trusted partners.

Leaders meet at the AIG Client Forum in London

AIG Client Forum London

AIG leaders hosted clients in London for a three-day forum as part of our commitment to help them navigate complex risks and capture new opportunities.

Watch the video

Investor Day 2025

AIG Investor Day 2025

The CEOs of Palantir and Anthropic join Peter Zaffino and CNBC's Sara Eisen for a discussion on how AI is reshaping insurance.

Watch the video

AIG Newsroom

Building Resilience in a Rapidly Changing Landscape

Building Resilience in a Rapidly Changing Landscape

At AIG's North America Client Summit, our leaders underscored the importance of AIG's technical expertise to help clients make forward-looking insurance decisions.

Watch the video

View all stories

Explore AIG Careers around the world

Find your place on the diverse team of experts and move your career—and world—forward.

View Careers

Title

AIG Insurance Home | AIG US

Description

American International Group, Inc, (AIG), is a global insurance organization providing a range of insurance and other financial services. Get to know us better.

Image

+
AIG

AIG Reports Excellent First Quarter 2026 Results

AIG is delivering on the ambitious three-year plan and guidance that we outlined at our Investor Day in 2025, supporting our clients, executing strategic initiatives with pace, and advancing our AI strategy. Prasad Demo

Learn more

Eric Anderson interviewed by Yahoo! Finance

Eric Andersen Talks with Yahoo! Finance

AIG President & Chief Executive Officer Eric Andersen discusses the evolving risk landscape and priorities for AIG.

Watch the video

AIG Women's open trophy on the golf green

Celebrate the 2026 AIG Women's Open

AIG is proud to support the incredible athletes inspiring the next generation of golf champions.

Read more

About AIG

We are American International Group, Inc, (AIG), a leading global insurance organization providing a wide range of property casualty insurance and other financial services. We provide world-class products and expertise to businesses and individuals in more than 200 countries and jurisdictions through AIG operations, licenses and authorizations as well as network partners. And we are committed to using our insights and thought leadership to not only manage risks, but to make real positive differences in every community we serve. Get to know us better.

Individuals

Explore our industry-leading solutions for individuals, from travel and personal accident insurance to coverage for Private Clients.

Discover product & services

Businesses

Discover how we're helping businesses identify emerging challenges and reduce risk, so they can reach their full potential.

Discover product & services

Risk Managers

Explore the products and tools we offer to help build an effective risk management program.

Discover products & services Multinational Log In

Brokers & Agents

Learn why AIG is the best partner to develop market-leading risk solutions for our clients.

Discover products & services Log In now

style

paleblue

AIG Performance & Initiatives

Eric Andersen

President and CEO Eric Andersen Affirms AIG's Strategy in Message to Clients and Partners

Eric Andersen discusses opportunities for AIG's next chapter in support of our valued clients and trusted partners.

Leaders meet at the AIG Client Forum in London

AIG Client Forum London

AIG leaders hosted clients in London for a three-day forum as part of our commitment to help them navigate complex risks and capture new opportunities.

Watch the video

Investor Day 2025

AIG Investor Day 2025

The CEOs of Palantir and Anthropic join Peter Zaffino and CNBC's Sara Eisen for a discussion on how AI is reshaping insurance.

Watch the video

AIG Newsroom

Building Resilience in a Rapidly Changing Landscape

Building Resilience in a Rapidly Changing Landscape

At AIG's North America Client Summit, our leaders underscored the importance of AIG's technical expertise to help clients make forward-looking insurance decisions.

Watch the video

View all stories

Explore AIG Careers around the world

Find your place on the diverse team of experts and move your career—and world—forward.

View Careers

Title

AIG Insurance Home | AIG US

Description

American International Group, Inc, (AIG), is a global insurance organization providing a range of insurance and other financial services. Get to know us better.

Image

From 23e3283acf2323150751c26edf38d64a45f04b2f Mon Sep 17 00:00:00 2001 From: Kiran Murugulla Date: Wed, 22 Jul 2026 13:04:53 -0400 Subject: [PATCH 8/9] chore: ignore analysis and testing artifacts --- .gitignore | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.gitignore b/.gitignore index 227e4d5..b9fc9fe 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,10 @@ migration-work/footer-validation/ .hlx/.da-token.json content + +# Analysis and testing artifacts +screenshots/ +scripts/*-hero*.js +scripts/screenshot-comparison.js +scripts/measure-styles.js +scripts/inspect-production.js From 3e9ccc69662c7c5e85d6c543d85212af4886c3df Mon Sep 17 00:00:00 2001 From: Kiran Murugulla Date: Wed, 22 Jul 2026 13:08:44 -0400 Subject: [PATCH 9/9] fix: resolve eslint errors in fragment.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Use template literals instead of string concatenation - All eslint errors resolved, only console warnings remain 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- blocks/fragment/fragment.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/fragment/fragment.js b/blocks/fragment/fragment.js index 58ace3a..c9ed825 100644 --- a/blocks/fragment/fragment.js +++ b/blocks/fragment/fragment.js @@ -49,10 +49,10 @@ export default async function decorate(block) { if (fragment) { const fragmentSection = fragment.querySelector(':scope .section'); if (fragmentSection) { - console.log("Fragment Section" + fragmentSection.outerHTML); + console.log(`Fragment Section${fragmentSection.outerHTML}`); block.closest('.section').classList.add(...fragmentSection.classList); block.closest('.fragment').replaceWith(...fragment.childNodes); - console.log("After Replaced" + fragmentSection.outerHTML); + console.log(`After Replaced${fragmentSection.outerHTML}`); } } }