Card

import { Card } from "@grassroot/ui-react";
 
<Card eyebrow="01 · Infrastructure" title="ledger-api">
  Event-sourced payments ledger. p95 142ms · 99.98% · 6 replicas.
</Card>
<Card framed eyebrow="02 · Stamp" title="Framed surface">
  Ink rule, no shadow - the brand stamp treatment.
</Card>

<script setup lang="ts">
import { Card } from "@grassroot/ui-vue";
</script>
 
<template>
  <Card
    eyebrow="01 · Infrastructure"
    title="ledger-api"
  >
    Event-sourced payments ledger. p95 142ms · 99.98% · 6 replicas.
  </Card>
  <Card
    framed
    eyebrow="02 · Stamp"
    title="Framed surface"
  >
    Ink rule, no shadow - the brand stamp treatment.
  </Card>
</template>

import { Component } from "@angular/core";
import { GrassrootCard } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootCard],
  template: `
    <grassroot-card
      eyebrow="01 · Infrastructure"
      title="ledger-api"
    >
      Event-sourced payments ledger. p95 142ms · 99.98% · 6 replicas.
    </grassroot-card>
    <grassroot-card
      [framed]="true"
      eyebrow="02 · Stamp"
      title="Framed surface"
    >
      Ink rule, no shadow - the brand stamp treatment.
    </grassroot-card>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Card } from "@grassroot/ui-svelte";
</script>
 
<Card
  eyebrow="01 · Infrastructure"
  title="ledger-api"
>
  Event-sourced payments ledger. p95 142ms · 99.98% · 6 replicas.
</Card>
<Card
  framed
  eyebrow="02 · Stamp"
  title="Framed surface"
>
  Ink rule, no shadow - the brand stamp treatment.
</Card>

import { Card } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Card
        eyebrow="01 · Infrastructure"
        title="ledger-api"
      >
        Event-sourced payments ledger. p95 142ms · 99.98% · 6 replicas.
      </Card>
      <Card
        framed
        eyebrow="02 · Stamp"
        title="Framed surface"
      >
        Ink rule, no shadow - the brand stamp treatment.
      </Card>
    </>
  );
}