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

# Overview

export const IconCard = ({iconName, title, color}) => {
  const iconClasses = `icon-container ${color || ''}`.trim();
  let icon;
  switch (iconName) {
    case 'shield-check':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9 12l2 2l4 -4"></path>
          <path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"></path>
        </svg>;
      break;
    case 'lock':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
        </svg>;
      break;
    case 'chip':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000000" viewBox="0 0 256 256"><path d="M152,96H104a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V104A8,8,0,0,0,152,96Zm-8,48H112V112h32Zm88,0H216V112h16a8,8,0,0,0,0-16H216V56a16,16,0,0,0-16-16H160V24a8,8,0,0,0-16,0V40H112V24a8,8,0,0,0-16,0V40H56A16,16,0,0,0,40,56V96H24a8,8,0,0,0,0,16H40v32H24a8,8,0,0,0,0,16H40v40a16,16,0,0,0,16,16H96v16a8,8,0,0,0,16,0V216h32v16a8,8,0,0,0,16,0V216h40a16,16,0,0,0,16-16V160h16a8,8,0,0,0,0-16Zm-32,56H56V56H200v95.87s0,.09,0,.13,0,.09,0,.13V200Z"></path></svg>;
      break;
    case 'credit-card':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
          <line x1="1" y1="10" x2="23" y2="10"></line>
        </svg>;
      break;
    case 'cube':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
          <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
          <line x1="12" y1="22.08" x2="12" y2="12"></line>
        </svg>;
      break;
    case 'gift':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 12 20 22 4 22 4 12"></polyline>
          <rect x="2" y="7" width="20" height="5"></rect>
          <line x1="12" y1="22" x2="12" y2="7"></line>
          <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
          <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
        </svg>;
      break;
    case 'rocket':
      icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path>
            <path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path>
            <circle cx="15" cy="9" r="1"></circle>
        </svg>;
      break;
    default:
      icon = null;
      break;
  }
  return <div className="icon-title-card">
      <div className={iconClasses}>
        {icon}
      </div>
      <h6 className="item-title">{title}</h6>
    </div>;
};

export const HorizontalCard = ({img, title, href, linkText = 'Read More', children}) => {
  return <a href={href} className="horizontal_card hover:!border-primary dark:hover:!border-primary-light">
      <div className="card-image-container">
        <img noZoom src={img} alt={title} />
      </div>
      <div className="card-content-container">
        <h2 className="card-title">{title}</h2>
        <div className="color_card-description">
          {children}
        </div>
      </div>
    </a>;
};

export const HorizontalColorCard = ({img, title, color, href, linkText = 'Read More', children}) => {
  const cardClassName = `horizontal_card horizontal_color_card ${color || ""}`.trim();
  return <div className={cardClassName}>
      <div className="card-content-container">
        <h2 className="card-title">{title}</h2>
        <div className="card-description dark-content">
          {children}
        </div>
      </div>
      <div className="card-image-container">
        {img && <img noZoom src={img} alt={title} />}
      </div>
    </div>;
};

<div className="block dark:hidden">
  <HorizontalColorCard title="Get started with automation" color="purple" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/workflows/banner/light.png">
    Automate your payments logic in clicks, not code.
  </HorizontalColorCard>
</div>

<div className="hidden dark:block">
  <HorizontalColorCard title="Get started with automation" color="purple" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/workflows/banner/dark.png">
    Automate your payments logic in clicks, not code.
  </HorizontalColorCard>
</div>

Workflows enable you to build end-to-end payment and commerce automation flows without writing any code. Primer gives you all the building blocks to create and manage your workflows based on your own business logic and requirements.

A workflow can leverage multiple Primer native and third-party [apps](/workflows/apps/native-apps/overview) to fulfill a use case. Each app offers a set of triggers and/or actions, enabling you to seamlessly automate and orchestrate the services that you need.

<HorizontalCard title="Learn about Workflow Apps" img="https://mintcdn.com/primer-cc826789/hMQvqYafZsY5btLD/images/overview-pages/workflows/create-workflow.png?fit=max&auto=format&n=hMQvqYafZsY5btLD&q=85&s=aadf0cc8e3af10d8b4a76072c87b8b5e" href="/workflows/apps/overview" width="720" height="432" data-path="images/overview-pages/workflows/create-workflow.png">
  Primer gives you all the building blocks to create & manage your workflows based on your own business logic and requirements.
</HorizontalCard>

## Power your flows with everything you need

<CardGroup cols={3}>
  <Card title="Native apps" href="/workflows/apps/native-apps/overview" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/native-apps/banner/light.png">
    Supercharge your flow with our ever-growing library of apps.
  </Card>

  <Card title="Third-party apps" href="/connections/workflow-apps/overview" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/third-party-apps/banner/light.png">
    Supercharge your flow with our ever-growing library of apps.
  </Card>

  <Card title="Utilities" href="/workflows/utilities/workflow-utilities" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/workflow-utilities/banner/light.png">
    Supercharge your flow with our ever-growing library of apps.
  </Card>
</CardGroup>

## Get the most out of Workflows

<CardGroup cols={3}>
  <Card title="Best practices" href="/workflows/best-practices" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/workflows/best-practices.png">
    Bring apps into sophisticated flows without a single line of code.
  </Card>

  <Card title="Discover templates" href="/workflows/templates" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/workflows/discover-templates.png">
    Get started with our library of templates.
  </Card>

  <Card title="Easily monitor your workflows" href="/workflows/monitor-workflows/overview" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/workflows/monitor-your-workflows.png">
    Get started with our library of templates.
  </Card>
</CardGroup>

<br />

## Use cases

<CardGroup cols={3}>
  <Card title="Send KYC verification link" icon="paper-plane" href="workflows/use-cases/send-kyc-verification-link">
    Automate sending a KYC verification link as part of your payment flow.
  </Card>
</CardGroup>