diff --git a/components/Section/Header/header.module.css b/components/Section/Header/header.module.css index f96cc08d2..93a893e31 100644 --- a/components/Section/Header/header.module.css +++ b/components/Section/Header/header.module.css @@ -2,19 +2,30 @@ display: grid; gap: var(--Spacing-x1); grid-template-columns: 1fr auto; + align-items: baseline; } .title { - grid-column: 1/2; - grid-row: 1/2; -} - -.link { - grid-column: 2/-1; - grid-row: 1/2; + grid-column: 1 / 2; } .subtitle { - grid-column: 1/-1; - grid-row: 2; + grid-column: 1 / 2; +} + +.linkWrapper { + display: flex; + align-items: baseline; + grid-column: 2 / 3; + gap: var(--Spacing-x-half); + justify-self: end; +} + +.link { + display: flex; + align-items: baseline; +} + +.icon { + align-self: center; } diff --git a/components/Section/Header/index.tsx b/components/Section/Header/index.tsx index c4354bd5e..0537b526a 100644 --- a/components/Section/Header/index.tsx +++ b/components/Section/Header/index.tsx @@ -1,3 +1,4 @@ +import ArrowRight from "@/components/Icons/ArrowRight" import Link from "@/components/TempDesignSystem/Link" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Title from "@/components/TempDesignSystem/Text/Title" @@ -21,12 +22,20 @@ export default function SectionHeader({ > {title} + {subtitle && {subtitle}} {link ? ( - - {link.text} - + + + + {link.text} + + ) : null} - {subtitle} ) }