Typography

import React from "react";

import { Grid, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    text: {
      color: token.colorTextSecondary
    },
    textWrapper: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeXXL}px ${token.paddingLG}px`
    },
    title: {
      fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3,
      marginTop: 0
    }
  };

  return (
    <div style={styles.textWrapper}>
      <Title level={1} style={styles.title}>Project drafts</Title>
      <Text style={styles.text}>Lorem ipsum dolor sit sdasd, consectetur adipiscing elit interdum hendrerit ex vitae sodales.</Text>
    </div>
  );
}

import React from "react";

import { Grid, Tag, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Title, Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    text: {
      color: token.colorTextSecondary
    },
    textWrapper: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeXXL}px ${token.paddingLG}px`
    },
    title: {
      fontSize: screens.md ? token.fontSizeHeading2 : token.fontSizeHeading3
    }
  };

  return (
    <div style={styles.textWrapper}>
      <Tag bordered={false}>Recently added</Tag>
      <Title level={1} style={styles.title}>Project drafts</Title>
      <Text style={styles.text}>Lorem ipsum dolor sit sdasd, consectetur adipiscing elit interdum hendrerit ex vitae sodales.</Text>
    </div>
  );
}