Custom Typography and Layout Components

This project provides a set of reusable styled components for typography and layout, built using Emotion for styling and React.

[Demo]

Features

• Typography Components: Predefined styles for headings, titles, and body text, including responsive options for font size, line height, and weight.
• Layout Components: Flexible and customizable vertical and horizontal layouts.

Components Overview

Typography Components

Headline

• Usage: For primary headings.
• Props:
  • xlarge, large, medium, small - Adjusts size and spacing.
  • bold - Applies bold font weight.
  • color, opacity - Customizes text color and transparency.

Title

• Usage: For secondary headings.
• Similar props as Headline.

Body

• Usage: For body text.
• Includes additional semiBold and textDecoration props.

Mark

• Usage: For annotations or small text highlights.

---

Layout Components

Vertical

• Usage: For vertical layouts with customizable gaps, alignment, and background styles.
• Props:
  • align, justify - Align items and justify content.
  • gap, border, padding - Control spacing and styles.

Horizontal

• Usage: Similar to Vertical but for horizontal layouts.

Centered

• Usage: Centers content both horizontally and vertically.

Box

• Usage: A general-purpose container with flexible styles.

Usage Examples

Typography Components

import React from "react";
import * as T from "./CustomTypography.styles";

const TypographyExample = () => (
  <div>
    <T.Headline xlarge bold>
      XLarge Bold Headline
    </T.Headline>
    <T.Body large color="#555">
      Large Body Text
    </T.Body>
  </div>
);

export default TypographyExample;

Layout Example

import React from "react";
import * as L from "./FlexLayout.styles";
import * as T from "./CustomTypography.styles";

const LayoutExample = () => (
  <L.Vertical gap="20px" bgColor="#f0f0f0" padding="20px">
    <T.Title large bold>
      Title in Vertical Layout
    </T.Title>
    <T.Body>Some descriptive body text.</T.Body>
  </L.Vertical>
);

export default LayoutExample;

Complete Example: Custom Typography Demo

import React from "react";
import CustomTypographySample from "./CustomTypographySample";

const App = () => <CustomTypographySample />;

export default App;