diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx
index 9d026f12b4925..1dd0839e5b758 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx
@@ -5,7 +5,7 @@
* 2.0.
*/
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle } from '@elastic/eui';
import React, { useMemo } from 'react';
import { useFooterStyles } from '../styles/footer.styles';
@@ -25,7 +25,9 @@ const FooterComponent = () => {
- {item.title}
+
+ {item.title}
+
{item.description}
diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx
index 295d6565a4cf1..7587f065a4de9 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx
@@ -101,14 +101,14 @@ export const useSetUpSections = ({ euiTheme }: { euiTheme: EuiThemeComputed }) =
id={currentSection.id}
data-test-subj={`section-${currentSection.id}`}
>
-
{currentSection.title}
-
+
- {title}
+
+ {title}
+
{description}
diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts
index 8cd3026000dc4..c0ab2961e4f4b 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts
@@ -5,7 +5,7 @@
* 2.0.
*/
-import { useEuiShadow, useEuiTheme } from '@elastic/eui';
+import { useEuiShadow, useEuiTheme, useEuiFontSize } from '@elastic/eui';
import { css } from '@emotion/css';
import { useMemo } from 'react';
@@ -16,6 +16,7 @@ export const RIGHT_CONTENT_WIDTH = 513;
export const useStepContentStyles = () => {
const { euiTheme } = useEuiTheme();
const imageShadow = useEuiShadow('s');
+ const descriptionHeader = useEuiFontSize('s');
const customStyles = useMemo(
() => ({
@@ -45,6 +46,11 @@ export const useStepContentStyles = () => {
'.step-paragraph': {
marginTop: euiTheme.size.xl,
},
+
+ '.euiTitle': {
+ fontSize: `${descriptionHeader.fontSize}`,
+ lineHeight: `${descriptionHeader.lineHeight}`,
+ },
},
}),
rightPanelStyles: css({
@@ -77,6 +83,8 @@ export const useStepContentStyles = () => {
euiTheme.size.s,
euiTheme.size.xl,
imageShadow,
+ descriptionHeader.fontSize,
+ descriptionHeader.lineHeight,
]
);
diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx
index c4d5fa13ec6f6..848eece5b243a 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx
@@ -52,7 +52,7 @@ const WelcomeHeaderComponent: React.FC<{ productTier?: ProductTier }> = ({ produ
)}
- {GET_STARTED_PAGE_SUBTITLE}
+ {GET_STARTED_PAGE_SUBTITLE}
{GET_STARTED_PAGE_DESCRIPTION}