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

# Capabilities

export const FeatureCardGrid = ({cols = 3, children}) => <div className={`not-prose feature-cards-grid feature-cards-cols-${cols}`}>
    {children}
  </div>;

export const FeatureCard = ({icon, title, children, href, linkHref, linkText, color, tag, tagPosition, layout, variant, iconSize}) => {
  const isHorizontal = layout === 'horizontal';
  const isFlat = variant === 'flat';
  const isLargeIcon = iconSize === 'lg';
  const isInlineTag = tagPosition === 'inline';
  const card = <div className={`feature-card ${href ? 'feature-card-link' : ''} ${!icon ? 'feature-card-no-icon' : ''} ${isHorizontal ? 'feature-card-horizontal' : ''} ${isFlat ? 'feature-card-flat' : ''} ${isLargeIcon ? 'feature-card-icon-lg' : ''}`}>
      {icon && <div className="feature-card-icon-wrapper">
          {color ? <div className="feature-card-icon" style={{
    WebkitMaskImage: `url(${icon})`,
    maskImage: `url(${icon})`,
    backgroundColor: color,
    width: '24px',
    height: '24px',
    WebkitMaskSize: 'contain',
    maskSize: 'contain',
    WebkitMaskRepeat: 'no-repeat',
    maskRepeat: 'no-repeat'
  }} /> : <img src={icon} alt="" className="feature-card-icon" />}
        </div>}
      <div className="feature-card-content">
        {isInlineTag ? <div className="feature-card-title-row">
            <span className="feature-card-title">{title}</span>
            {tag && <span className="feature-card-tag">{tag}</span>}
          </div> : <div className="feature-card-title">{title}</div>}
        <div className="feature-card-desc">{children}</div>
        {tag && !isInlineTag && <div className="feature-card-tag-row"><span className="feature-card-tag">{tag}</span></div>}
        {linkText && <div className="feature-card-link-row">
            {linkHref ? <a href={linkHref} className="feature-card-text-link" style={{
    color: color
  }}>
                {linkText}
              </a> : <span className="feature-card-text-link feature-card-coming-soon" style={{
    color: color,
    opacity: 0.6
  }}>
                {linkText}
              </span>}
          </div>}
      </div>
    </div>;
  return href ? <a href={href} className="feature-card-anchor">{card}</a> : card;
};

<img src="https://mintcdn.com/ramps/iSnT-NB4iMMUe72B/images/heroes/hero-capabilities-light.svg?fit=max&auto=format&n=iSnT-NB4iMMUe72B&q=85&s=46bd5e7339559b9c01721548ab7a97e3" alt="Capabilities hero" className="page-hero block dark:hidden" width="928" height="400" data-path="images/heroes/hero-capabilities-light.svg" />

<img src="https://mintcdn.com/ramps/iSnT-NB4iMMUe72B/images/heroes/hero-capabilities-dark.svg?fit=max&auto=format&n=iSnT-NB4iMMUe72B&q=85&s=c3b70928587d07ab2ce8417c7062be5f" alt="Capabilities hero" className="page-hero hidden dark:block" width="928" height="400" data-path="images/heroes/hero-capabilities-dark.svg" />

Grid exposes low-level primitives that you combine to build any payment flow. Fiat, crypto, or both.

<FeatureCardGrid cols={3}>
  <FeatureCard icon="/images/icons/paper-plane-top-right.svg" title="Send" color="#00B3E0" linkHref="/platform-overview/core-concepts/currencies-and-rails" linkText="View coverage">
    Push funds to bank accounts in 65+ countries, crypto wallets, or UMA addresses. You choose the destination, Grid handles delivery.
  </FeatureCard>

  <FeatureCard icon="/images/icons/arrow-inbox.svg" title="Receive" color="#11A967" linkHref="/global-p2p/sending-receiving-payments/receiving-payments" linkText="Receiving payments">
    Accept incoming payments via bank transfer, crypto deposit, or UMA. Webhooks notify you in real-time.
  </FeatureCard>

  <FeatureCard icon="/images/icons/repeat.svg" title="Convert" color="#FF21CC" linkHref="/platform-overview/core-concepts/quote-system" linkText="How quotes work">
    Exchange between fiat currencies or convert fiat to crypto. Lock in rates before execution.
  </FeatureCard>

  <FeatureCard icon="/images/icons/wallet1.svg" title="Hold" color="#F77D26" linkHref="/platform-overview/core-concepts/account-model" linkText="Account model">
    Maintain balances in USD, EUR, BRL, BTC, USDC, and more. Fund and manage accounts via API.
  </FeatureCard>

  <FeatureCard icon="/images/icons/arrow-left-right.svg" title="Ramp" color="#CF00A7" linkHref="/ramps" linkText="Explore ramps">
    On-ramp from bank accounts to BTC or stablecoins. Off-ramp crypto to local bank rails instantly.
  </FeatureCard>

  <FeatureCard icon="/images/icons/receipt-check.svg" title="Bill" color="#118453" linkText="Coming soon">
    Generate payment requests and collect funds. Track payment status through completion.
  </FeatureCard>

  <FeatureCard icon="/images/icons/code.svg" title="Program" color="#44DDB5" linkHref="/api-reference" linkText="API reference">
    Automate flows with webhooks, approval logic, and idempotent operations. Build any payment experience.
  </FeatureCard>

  <FeatureCard icon="/images/icons/people.svg" title="Identify" color="#0072DB" linkHref="/payouts-and-b2b/onboarding/configuring-customers" linkText="Onboarding guide">
    KYC/KYB verification—use Grid's hosted flows or bring your own compliance.
  </FeatureCard>
</FeatureCardGrid>
