Billboard

import { Billboard, Heading, Text, Button } from "@grassroot/ui-react";
 
<Billboard tone="indigo" decorations={[
  { shape: "circle", position: "top-right", tone: "amber", size: 150 },
  { shape: "triangle", position: "bottom-left", tone: "teal", size: 110, rotate: -12 },
]}>
  <Heading level={2}>Ship the interface</Heading>
</Billboard>

<script setup lang="ts">
import { Heading, Billboard } from "@grassroot/ui-vue";
</script>
 
<template>
  <Billboard
    tone="indigo"
    :decorations="[
    { shape: 'circle', position: 'top-right', tone: 'amber', size: 150 },
    { shape: 'triangle', position: 'bottom-left', tone: 'teal', size: 110, rotate: -12 },
  ]"
  >
    <Heading :level="2">Ship the interface</Heading>
  </Billboard>
</template>

import { Component } from "@angular/core";
import { GrassrootHeading, GrassrootBillboard } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootHeading, GrassrootBillboard],
  template: `
    <grassroot-billboard
      tone="indigo"
      [decorations]="[
      { shape: 'circle', position: 'top-right', tone: 'amber', size: 150 },
      { shape: 'triangle', position: 'bottom-left', tone: 'teal', size: 110, rotate: -12 },
    ]"
    >
      <grassroot-heading [level]="2">Ship the interface</grassroot-heading>
    </grassroot-billboard>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Heading, Billboard } from "@grassroot/ui-svelte";
</script>
 
<Billboard
  tone="indigo"
  decorations={[
  { shape: "circle", position: "top-right", tone: "amber", size: 150 },
  { shape: "triangle", position: "bottom-left", tone: "teal", size: 110, rotate: -12 },
]}
>
  <Heading level={2}>Ship the interface</Heading>
</Billboard>

import { Heading, Billboard } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Billboard
        tone="indigo"
        decorations={[
        { shape: "circle", position: "top-right", tone: "amber", size: 150 },
        { shape: "triangle", position: "bottom-left", tone: "teal", size: 110, rotate: -12 },
      ]}
      >
        <Heading level={2}>Ship the interface</Heading>
      </Billboard>
    </>
  );
}