Prism Docs

import { Card } from '@mylighthouse/prism-react';

export default function BasicExample(): React.JSX.Element {
  return (
    <Card>
      <Card.Header>
        <Card.Header.Title>Basic card</Card.Header.Title>
      </Card.Header>
      <Card.Content>
        <p className="text-300--regular">
          This is a basic padded card. Use <code>contentLayout</code> to adjust
          padding / borders.
        </p>
      </Card.Content>
      <Card.Footer>
        <p className="text-300--regular">Footer actions / meta</p>
      </Card.Footer>
    </Card>
  );
}

import { Button, Card } from '@mylighthouse/prism-react';

export default function ContentLayoutExample(): React.JSX.Element {
  return (
    <div className="flex flex-wrap gap-300 items-start">
      <Card contentLayout="padded">
        <Card.Header>
          <Card.Header.Title>Padded (default)</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <p className="text-300--regular">Standard internal padding.</p>
        </Card.Content>
      </Card>
      <Card contentLayout="borderedHeader">
        <Card.Header>
          <Card.Header.Title>Bordered header</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <p className="text-300--regular">
            Adds a border between the header & top padding to the content.
          </p>
        </Card.Content>
      </Card>
      <Card contentLayout="noPadding">
        <Card.Header>
          <Card.Header.Title>No padding</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <div className="flex flex-col gap-100">
            <p className="text-300--regular">You control spacing completely.</p>
            <Button size="small">Action</Button>
          </div>
        </Card.Content>
      </Card>
    </div>
  );
}

import { Button, Card } from '@mylighthouse/prism-react';

export default function HeaderAfterExample(): React.JSX.Element {
  return (
    <Card contentLayout="borderedHeader">
      <Card.Header>
        <Card.Header.Title>Header after</Card.Header.Title>
        <Card.Header.After>
          <Button size="small">Add</Button>
        </Card.Header.After>
      </Card.Header>
      <Card.Content>
        <p className="text-300--regular">
          Use <code>{'<Card.Header.After>'}</code> for right-aligned controls.
        </p>
      </Card.Content>
    </Card>
  );
}

import { Card } from '@mylighthouse/prism-react';

export default function VariantsNestingExample(): React.JSX.Element {
  return (
    <div className="flex flex-wrap gap-300 items-start">
      <Card isSecondary>
        <Card.Header>
          <Card.Header.Title>Secondary</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <p className="text-300--regular">
            Reduced internal spacing and title style.
          </p>
        </Card.Content>
      </Card>
      <Card contentLayout="noPadding" isParent>
        <Card.Header>
          <Card.Header.Title>Parent</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <div className="p-400">
            <Card contentLayout="borderedHeader" isSecondary>
              <Card.Header>
                <Card.Header.Title>Secondary child</Card.Header.Title>
              </Card.Header>
              <Card.Content>
                <p className="text-300--regular">Content</p>
              </Card.Content>
            </Card>
          </div>
        </Card.Content>
      </Card>
      <Card>
        <Card.Header>
          <Card.Header.Title disabled>Disabled title</Card.Header.Title>
        </Card.Header>
        <Card.Content>
          <p className="text-300--regular">Content</p>
        </Card.Content>
      </Card>
    </div>
  );
}