WPDS Documentation & Resources

export default function Example() {
  const Headline = styled("h1", {
    fontFamily: theme.fonts.headline, // font family example
    fontSize: theme.fontSizes["200"],
    color: theme.colors.primary,
  });
  const Subhead = styled("h2", {
    fontFamily: theme.fonts.subhead, // font family example
    fontWeight: theme.fontWeights.light,
    fontSize: theme.fontSizes["150"],
    color: theme.colors.accessible,
  });
  const Body = styled("p", {
    fontFamily: theme.fonts.body, // font family example
    fontSize: theme.fontSizes["100"],
  });
  const Meta = styled("p", {
    fontFamily: theme.fonts.meta, // font family example
    fontSize: theme.fontSizes["075"],
    color: theme.colors.accessible,
  });
  return (
    <div>
      <Headline>Headline</Headline>
      <Subhead>Subheadline</Subhead>
      <Body>Body text</Body>
      <Meta>Meta text</Meta>
    </div>
  );
}