> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spark.money/llms.txt
> Use this file to discover all available pages before exploring further.

# Lightspark Grid

> Add fiat on-ramp and off-ramp to your Spark app with Grid.

export const Button = ({href, children, className = "", target = "_self", outline}) => {
  return <a href={href} target={target} rel="noopener noreferrer" className={`not-prose inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium rounded-xl transition-colors duration-200 ${outline ? "spark-button-outline" : "spark-button"} ${className}`}>
      {children}
    </a>;
};

export const HCard = ({icon, light, dark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center items-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="hcard-row" style={{
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '1rem'
  }}>
          <div className="hcard-icon" style={{
    flexShrink: 0,
    width: '40px',
    height: '40px'
  }}>
            {light && dark ? <>
                <img src={light} className="icon-light pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
                <img src={dark} className="icon-dark pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />
              </> : <img src={icon} className="pointer-events-none" alt={title} width={40} height={40} style={{
    width: '40px',
    height: '40px',
    margin: 0
  }} />}
          </div>
          <div className="hcard-text" style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem'
  }}>
            <h2 className="card-title text font-semibold leading-none" style={{
    margin: 0
  }}>
              {title}
            </h2>
            <p className="card-description text-sm leading-none" style={{
    margin: 0
  }}>
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const VCard = ({img, light, dark, icon, href, title, description, target = "_self"}) => {
  return <div className="spark-card overflow-hidden rounded-2xl flex justify-center items-center hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="vcard-col">
          <div className="vcard-image w-full aspect-video relative">
            {light && dark ? <>
                <img src={light} alt={title} className="icon-light w-full h-full object-cover pointer-events-none" />
                <img src={dark} alt={title} className="icon-dark w-full h-full object-cover pointer-events-none" />
              </> : <div className="w-full h-full bg-cover bg-center bg-no-repeat" style={{
    backgroundImage: `url(${img})`
  }} />}
          </div>
          <div className="vcard-content flex flex-col gap-2 p-6">
            <h2 className="card-title text font-semibold leading-none">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

export const Card = ({icon, iconLight, iconDark, href, title, description, target = "_self"}) => {
  return <div className="spark-card rounded-2xl flex justify-center p-4 hover:scale-[1.02] transition-all duration-300">
      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined} className="w-full">
        <div className="flex flex-col gap-12 justify-space-between">
          <div className="w-8 h-8">
            {iconLight && iconDark ? <>
                <img src={iconLight} className="icon-light w-full h-full pointer-events-none" alt={title} width={32} height={32} />
                <img src={iconDark} className="icon-dark w-full h-full pointer-events-none" alt={title} width={32} height={32} />
              </> : <img src={icon} className="w-full h-full pointer-events-none" alt={title} width={32} height={32} />}
          </div>
          <div className="flex flex-col gap-2">
            <h2 className="card-title text font-semibold leading-tight">
              {title}
            </h2>
            <p className="card-description text-sm leading-tight">
              {description}
            </p>
          </div>
        </div>
      </a>
    </div>;
};

<Frame className="chill">
  <img src="https://mintcdn.com/lightspark/1qhg2-dutO4_dxVH/images/integrations/grid.png?fit=max&auto=format&n=1qhg2-dutO4_dxVH&q=85&s=5fbb2ffcca977872da7b779be89bf762" alt="Grid" width="1920" height="1080" data-path="images/integrations/grid.png" />
</Frame>

Grid gives builders on Spark everything they need to create natively embedded on/off-ramp experiences
directly within their wallet architecture. Whether you’re pulling funds from a U.S. bank account into
a Spark wallet or off-ramping elsewhere, Grid provides the APIs to power the next generation of money apps natively on Bitcoin.

<Button href="https://lightspark.com/grid" outline target="_blank">
  Learn more ->
</Button>

<br />

***

### Use Cases

<Columns cols="2" className="gap-4 chill">
  <Card title="Bitcoin Cashbacks" iconLight="/icons/icon-btc-black.svg" iconDark="/icons/icon-btc-white.svg" href="https://grid.lightsparks.com/" description="Let users earn BTC or tokens every time they shop or spend" />

  <Card title="Buy & Sell Bitcoin" iconLight="/icons/icon-swap-black.svg" iconDark="/icons/icon-swap-white.svg" href="https://grid.lightsparks.com/" description="Buy and sell Bitcoin instantly with Lightning" />

  <Card title="Stablecoin Payouts" iconLight="/icons/icon-coins-black.svg" iconDark="/icons/icon-coins-white.svg" href="https://grid.lightsparks.com/" description="Pay out stablecoins to users instantly" />

  <Card title="Off-ramp to bank account" iconLight="/icons/icon-bank-black.svg" iconDark="/icons/icon-bank-white.svg" href="https://grid.lightsparks.com/" description="Off-ramp to bank account instantly" />
</Columns>

<br />

***

## Documentation

<Columns cols="1">
  <HCard title="Grid Official Docs" icon="/icons/icon-app-grid.svg" description="Official documentation for Grid" href="https://grid.lightspark.com/" target="_blank" />
</Columns>