import { Heading, Button, Prose, Card,
} from "@eco/stratos-components";
<Card>
  <div className="flex items-center justify-between">
    <Heading size="sm">Hello, Eco!</Heading>
    <Button iconName="gear" hideLabel variant="subtle-primary">
      Preferences
    </Button>
  </div>
  <div className="border-y">
    <Prose>
      <p>Check out the Eco components in action!</p>
      <p>The Card component is holding it all together, Prose is
      keepin' it pretty, there's a helpful Header, and even a
      Button!</p>
      <p>But wait, there's more! Check out the{" "}
      <a href="/components/elements/autocomplete/">Docs</a> section
      for more.</p>
    </Prose>
  </div>
  <div className="mt-4 flex justify-end">
    <Button variant="primary">Let's Do This!</Button>
  </div>
</Card>