Figure

import { Figure } from "@grassroot/ui-react";
 
export default function FigureDemo() {
  return (
    <Figure title="A figure can render an image or supplied children.">
      <div aria-label="Figure content">Figure content</div>
    </Figure>
  );
}

<script setup lang="ts">
import { Figure } from "@grassroot/ui-vue";
</script>
 
<template>
  <Figure title="A figure can render an image or supplied children.">
    <div aria-label="Figure content">Figure content</div>
  </Figure>
</template>

import { Component } from "@angular/core";
import { GrassrootFigure } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-figure-demo",
  standalone: true,
  imports: [GrassrootFigure],
  host: { style: "display: contents" },
  template: `
    <grassroot-figure title="A figure can render an image or supplied children.">
      <div aria-label="Figure content">Figure content</div>
    </grassroot-figure>
  `,
})
export class FigureDemoComponent {}
 
export default FigureDemoComponent;

<script lang="ts">
  import { Figure } from "@grassroot/ui-svelte";
</script>
 
<Figure title="A figure can render an image or supplied children.">
  <div aria-label="Figure content">Figure content</div>
</Figure>

/** @jsxImportSource solid-js */
import { Figure } from "@grassroot/ui-solid";
 
export default function FigureDemo() {
  return (
    <Figure title="A figure can render an image or supplied children.">
      <div aria-label="Figure content">Figure content</div>
    </Figure>
  );
}