Add ActionCard and ActionCardGrid

[chasefleming]

Dark Mode

Light Mode

Usage Example

The data:

const gridData = {
  title: 'Getting Started',
  sections: [
    {
      title: 'Get Started',
      cards: [
        {
          heading: 'Hello World',
          description:
            'Build and deploy your first contract, connect to it from the frontend, and call your smart contract functions - all in less than 30 minutes.',
          iconColor: 'green',
          cardColor: 'black',
        },
        {
          heading: 'A Better Language',
          description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.',
          iconColor: 'green',
          cardColor: 'black',
        },
        {
          heading: 'EVM++ on Flow',
          description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.',
          iconColor: 'green',
          cardColor: 'black',
        },
      ],
    },
    {
      title: 'How To',
      cards: [
        {
          heading: 'Launch a Token',
          description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.',
          iconColor: 'green',
          cardColor: 'black',
        },
        {
          heading: 'Query Onchain Data',
          description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.',
          iconColor: 'green',
          cardColor: 'black',
        },
        {
          heading: 'VRF',
          description:
            'VRF is built into Flow at the protocol level to provide secure, verifiable randomness.',
          iconColor: 'green',
          cardColor: 'black',
        },
        {
          heading: 'Launch a Token',
          description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.',
          iconColor: 'green',
          cardColor: 'green',
        },
        {
          heading: 'Query Onchain Data',
          description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.',
          iconColor: 'green',
          cardColor: 'black',
        },
        {
          heading: 'VRF',
          description:
            'VRF is built into Flow at the protocol level to provide secure, verifiable randomness.',
          iconColor: 'green',
          cardColor: 'black',
        },
      ],
    },
  ],
};

Goes in this component:

<ActionCardGrid title={gridData.title} sections={gridData.sections} />

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 22, 2025 10:06pm