Quote

Install and import

Quote is in @dovetail-ds/react. Install it with React, if you haven't:

Guidelines

Testimonial or pull quote. Uses figure and blockquote so the attribution is programmatically tied to the words.

Rules

• Do not add quotation marks in the content. If the design calls for them, they belong in the component, not the copy.
• Always attribute. An unattributed testimonial is marketing copy pretending to be evidence.
• lg is for a single hero quote per page. Using it for a row of three testimonials makes none of them stand out.
• Keep quotes under roughly 40 words. Longer ones stop being quotable.

Tradeoffs

Large quote type competes with the page heading. On a landing page, pick one of the two to be the largest thing on screen.

Props

The typed contract, from Quote.d.ts.

import * as React from "react";

/** Pull quote or testimonial with attribution. */
export interface QuoteProps extends Omit<React.HTMLAttributes<HTMLElement>, "role"> {
  /** The quoted text, without quotation marks. */
  children?: React.ReactNode;
  /** Who said it. */
  attribution?: React.ReactNode;
  /** Their title or company. */
  role?: React.ReactNode;
  /** Avatar element for the speaker. */
  avatar?: React.ReactNode;
  /** @default "md" */
  size?: "md" | "lg";
}

export declare function Quote(props: QuoteProps): React.JSX.Element;

Tokens it reads

Every custom property Quote.jsx resolves, read from the source: 152 semantic, 2 primitive. Component tier first, because that is the one to reach for.

Open the graph

• semantic Shared roles. Override one and everything using that role moves with it.
• primitive Raw values. A component reading one directly is a deliberate exception.

Source

React only, no dependencies, every value a token.

import React from "react";

export function Quote({ children, attribution, role, avatar, size = "md", style, ...rest }) {
  const t = size === "lg" ? "heading-sm" : "body-lg";
  return (
    <figure style={{ margin: 0, display: "flex", flexDirection: "column", gap: "var(--dt-space-stack-sm)", ...style }} {...rest}>
      <blockquote style={{
        margin: 0, fontFamily: `var(--dt-text-${t}-family)`, fontSize: `var(--dt-text-${t}-size)`,
        lineHeight: `var(--dt-text-${t}-line)`, color: "var(--dt-text-primary)",
        fontWeight: size === "lg" ? "var(--dt-font-weight-medium)" : "var(--dt-font-weight-regular)",
        textWrap: "pretty", maxWidth: "54ch",
      }}>{children}</blockquote>
      {(attribution || avatar) && (
        <figcaption style={{ display: "flex", alignItems: "center", gap: "var(--dt-space-inline-sm)" }}>
          {avatar}
          <span style={{ display: "flex", flexDirection: "column" }}>
            {attribution && <span style={{ fontFamily: "var(--dt-text-label-md-family)", fontSize: "var(--dt-text-label-md-size)", fontWeight: "var(--dt-font-weight-medium)", color: "var(--dt-text-primary)" }}>{attribution}</span>}
            {role && <span style={{ fontFamily: "var(--dt-text-body-sm-family)", fontSize: "var(--dt-text-body-sm-size)", color: "var(--dt-text-secondary)" }}>{role}</span>}
          </span>
        </figcaption>
      )}
    </figure>
  );
}

In context

Quote also appears on the content reference cards, alongside the rest of its family.

• ContentDetail