diff --git a/packages/vkui/src/components/Typography/Footnote/Footnote.module.css b/packages/vkui/src/components/Typography/Footnote/Footnote.module.css
index 73d715b480..25150a75d1 100644
--- a/packages/vkui/src/components/Typography/Footnote/Footnote.module.css
+++ b/packages/vkui/src/components/Typography/Footnote/Footnote.module.css
@@ -5,6 +5,46 @@
font-family: var(--vkui--font_footnote--font_family--regular);
}
+.Footnote--sizeY-compact {
+ font-size: var(
+ --vkui--font_footnote--font_size--compact,
+ var(--vkui--font_footnote--font_size--regular)
+ );
+ line-height: var(
+ --vkui--font_footnote--line_height--compact,
+ var(--vkui--font_footnote--line_height--regular)
+ );
+ font-weight: var(
+ --vkui--font_footnote--font_weight--compact,
+ var(--vkui--font_footnote--font_weight--regular)
+ );
+ font-family: var(
+ --vkui--font_footnote--font_family--compact,
+ var(--vkui--font_footnote--font_family--regular)
+ );
+}
+
+@media (--sizeY-compact) {
+ .Footnote--sizeY-none {
+ font-size: var(
+ --vkui--font_footnote--font_size--compact,
+ var(--vkui--font_footnote--font_size--regular)
+ );
+ line-height: var(
+ --vkui--font_footnote--line_height--compact,
+ var(--vkui--font_footnote--line_height--regular)
+ );
+ font-weight: var(
+ --vkui--font_footnote--font_weight--compact,
+ var(--vkui--font_footnote--font_weight--regular)
+ );
+ font-family: var(
+ --vkui--font_footnote--font_family--compact,
+ var(--vkui--font_footnote--font_family--regular)
+ );
+ }
+}
+
.Footnote--caps {
font-size: var(--vkui--font_footnote_caps--font_size--regular);
line-height: var(--vkui--font_footnote_caps--line_height--regular);
@@ -12,3 +52,43 @@
font-family: var(--vkui--font_footnote_caps--font_family--regular);
text-transform: uppercase;
}
+
+.Footnote--sizeY-compact.Footnote--caps {
+ font-size: var(
+ --vkui--font_footnote_caps--font_size--compact,
+ var(--vkui--font_footnote_caps--font_size--regular)
+ );
+ line-height: var(
+ --vkui--font_footnote_caps--line_height--compact,
+ var(--vkui--font_footnote_caps--line_height--regular)
+ );
+ font-weight: var(
+ --vkui--font_footnote_caps--font_weight--compact,
+ var(--vkui--font_footnote_caps--font_weight--regular)
+ );
+ font-family: var(
+ --vkui--font_footnote_caps--font_family--compact,
+ var(--vkui--font_footnote_caps--font_family--regular)
+ );
+}
+
+@media (--sizeY-compact) {
+ .Footnote--sizeY-none.Footnote--caps {
+ font-size: var(
+ --vkui--font_footnote_caps--font_size--compact,
+ var(--vkui--font_footnote_caps--font_size--regular)
+ );
+ line-height: var(
+ --vkui--font_footnote_caps--line_height--compact,
+ var(--vkui--font_footnote_caps--line_height--regular)
+ );
+ font-weight: var(
+ --vkui--font_footnote_caps--font_weight--compact,
+ var(--vkui--font_footnote_caps--font_weight--regular)
+ );
+ font-family: var(
+ --vkui--font_footnote_caps--font_family--compact,
+ var(--vkui--font_footnote_caps--font_family--regular)
+ );
+ }
+}
diff --git a/packages/vkui/src/components/Typography/Footnote/Footnote.tsx b/packages/vkui/src/components/Typography/Footnote/Footnote.tsx
index f5a236123a..f4fd4ea53f 100644
--- a/packages/vkui/src/components/Typography/Footnote/Footnote.tsx
+++ b/packages/vkui/src/components/Typography/Footnote/Footnote.tsx
@@ -1,7 +1,13 @@
import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
import { type HasCaps, Typography, type TypographyProps } from '../Typography';
import styles from './Footnote.module.css';
+const sizeYClassNames = {
+ none: styles['Footnote--sizeY-none'],
+ compact: styles['Footnote--sizeY-compact'],
+};
+
export interface FootnoteProps extends TypographyProps, HasCaps {}
/**
@@ -16,12 +22,21 @@ export const Footnote = ({
normalize = true,
inline = false,
...restProps
-}: FootnoteProps): React.ReactNode => (
-
-);
+}: FootnoteProps): React.ReactNode => {
+ const { sizeY = 'none' } = useAdaptivity();
+
+ return (
+
+ );
+};