Basic Card

The Card in its most basic form is simply a container with some basic styles

Live Editor

function Example() {
  return (
    <div className="tw">
      <Card>
        <Heading level="h2">Card title</Heading>
        <Heading level="h6">Subtitle</Heading>

        <Paragraph noDefaultMargins>
          Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
          incididunt ut labore et dolore. Lorem ipsum dolor sit amet consectetur
          adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore. Lorem
          ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor
          incididunt ut labore et dolore.
        </Paragraph>
      </Card>
    </div>
  );
}

Result

Loading...

Resource Card

The ResourceCard is used for interactive elements like Assignments

Live Editor

function Example() {
  return (
    <div className="tw">
      <div className="grid grid-cols-3 xl-d:grid-cols-1 gap-e24 font-sans">
        <ResourceCard
          variant="purple"
          icon="HomeIcon"
          loading={false}
          title="Article"
          content="Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore"
          subtitle="5 min read"
          className="max-w-[350px]"
          onClick={() => window.alert("clicked!")}
        />
        <ResourceCard loading />
        <ResourceCard
          variant="orange"
          icon="HomeIcon"
          loading={false}
          title="Article"
          content="Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore"
          subtitle="5 min read"
          className="max-w-[350px]"
          onClick={() => window.alert("clicked!")}
        />
      </div>
    </div>
  );
}

Result

Loading...