💄 Add padding for big text and eyebrow #2009

equinor · Dec 20, 2023 · 939d32a · 939d32a
1 parent 098f223
commit 939d32a
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx
@@ -22,6 +22,10 @@ const StyledEnvisTeaser = styled(EnvisTeaser)`
   font-size: var(--typeScale-1);
 `
 
+const StyledEyeBrow = styled(Eyebrow)`
+  padding-bottom: var(--space-large);
+`
+
 const StyledTeaserTitle = styled(TitleText)`
   padding-bottom: var(--space-large);
 `
@@ -99,22 +103,24 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
         <Content>
           {isBigText ? (
             text && (
-              <IngressText
-                value={text}
-                components={{
-                  block: {
-                    normal: ({ children }: { children: React.ReactNode }) => (
-                      <Text size="lg" lineHeight="2_5">
-                        {children}
-                      </Text>
-                    ),
-                  } as BlockType,
-                }}
-              />
+              <ContentWrapper>
+                <IngressText
+                  value={text}
+                  components={{
+                    block: {
+                      normal: ({ children }: { children: React.ReactNode }) => (
+                        <Text size="lg" lineHeight="2_5">
+                          {children}
+                        </Text>
+                      ),
+                    } as BlockType,
+                  }}
+                />
+              </ContentWrapper>
             )
           ) : (
             <ContentWrapper>
-              {overline && <Eyebrow>{overline}</Eyebrow>}
+              {overline && <StyledEyeBrow>{overline}</StyledEyeBrow>}
               {title && <StyledTeaserTitle value={title} />}
               {text && <IngressText value={text} />}
             </ContentWrapper>