> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bfl.ml/llms.txt
> Use this file to discover all available pages before exploring further.

# Infographics

> Generate clean, structured infographics with FLUX by specifying layout, content hierarchy, icons, and color palette in your prompts.

export const PromptDisplay = ({prompt}) => {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard.writeText(prompt);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };
  return <div className="not-prose" style={{
    marginTop: "1rem"
  }}>
      <div style={{
    backgroundColor: "#1a1a1a",
    borderRadius: "1rem",
    padding: "1.25rem 1.5rem",
    display: "flex",
    flexDirection: "column",
    gap: "1rem"
  }}>
        <p style={{
    color: "#e5e5e5",
    fontSize: "1rem",
    lineHeight: 1.6,
    margin: 0,
    fontFamily: "inherit"
  }}>
          {prompt}
        </p>
        <div style={{
    display: "flex",
    justifyContent: "flex-end"
  }}>
          <button onClick={copy} style={{
    backgroundColor: copied ? "#3d8a5b" : "var(--aspen-evergreen, #486A58)",
    color: "#fff",
    border: "none",
    borderRadius: "0.375rem",
    padding: "0.25rem 0.6rem",
    fontSize: "0.7rem",
    fontWeight: 600,
    cursor: "pointer",
    transition: "background-color 0.2s"
  }}>
            {copied ? "Copied!" : "Copy prompt"}
          </button>
        </div>
      </div>
    </div>;
};

FLUX can generate clean, visually appealing infographics from descriptive prompts. Specify the layout, content hierarchy, icons, and color palette to get structured visual information designs.

<Tip>
  Be explicit about the layout structure (steps, sections, columns) and visual style (minimalist, colorful, corporate). The more specific your content hierarchy, the better the result.
</Tip>

## Examples

<Columns cols={2}>
  <div>
    <img src="https://cdn.sanity.io/images/2gpum2i6/production/0be71156d3d086117506a054cee29f83eafec85a-1040x1040.png" alt="Step-by-step sandwich infographic" />

    <PromptDisplay prompt="Create a clear colorful infographic that explains step by step how to make a sandwich. Use simple icons and minimal text. Include the following steps with numbered sections. One choose the type of bread. Two add a spread. Three place the vegetables. Four close the sandwich and cut it in half. Use a friendly visual style with soft rounded shapes. Add small English labels next to each icon for clarity." />
  </div>

  <div>
    <img src="https://cdn.sanity.io/images/2gpum2i6/production/f928d19ad667a6b02ad3211977dc6bec403ef940-1408x1408.png" alt="Pistachio ice cream age infographic" />

    <PromptDisplay prompt="Create a cute minimalist infographic that shows how the love for pistachio ice cream increases with age. Use soft pastel colors, simple icons and a clean layout. Include a small girl with a tiny pistachio scoop at the left, a teenager girl with a medium scoop in the middle, and an adult woman with a big pistachio ice cream at the right. Add the text 'Pistachio love grows with you' in a friendly rounded font at the top." />
  </div>

  <div>
    <img src="https://cdn.sanity.io/images/2gpum2i6/production/946125b6b3253445a29776c9835cea48a78981f8-1408x1408.png" alt="CNN neural network infographic" />

    <PromptDisplay prompt="Minimal vector style infographic of a CNN neural network, white background, centered horizontal layout, very clean and sleek, on the far left a rounded square placeholder with a soft grey border and inside the text 'Input image', to its right a simple arrow pointing to a rounded rectangle with soft pastel fill and the text 'Convolution layer', then another arrow pointing to a rounded rectangle with the text 'Pooling layer', then a thin arrow leading to a horizontal rounded pill shape with the text 'Flatten', then an arrow leading to a single circle on the right with the text 'Output: Cat'" />
  </div>

  <div>
    <img src="https://cdn.sanity.io/images/2gpum2i6/production/69e0beec6459e6d15f0cafc9e210220f28c36010-1408x1408.png" alt="How plants grow infographic" />

    <PromptDisplay prompt="Create a clean, minimal infographic titled 'How Plants Grow' showing 6 steps vertically: Seed, Water, Sunlight, Soil & Nutrients, Growth, Flowers & Seeds. Use simple icons, short descriptions, a time arrow on the left side, and a white background with a friendly educational style." />
  </div>
</Columns>