Navigational Card

The Navigational Card component is a navigation card component that displays a navigation card with customizable colors and styling.

Introduction

Learn about Elixir UI

Getting Started

Learn about Elixir UI

All Components

Learn about Elixir UI

All Templates

Learn about Elixir UI

Usage

Follow the steps below to add the Navigational Card Component to your project.

Add the import statement for the component

import { NavigationalCard } from "@/components/elixir-ui/navigational-card";

Import the component in your project and use it

<NavigationalCard
  title="Getting Started"
  href="#getting-started"
  description="Learn about Elixir UI"
  icon={<RocketIcon className="h-6 w-6" />}
  className="w-xs"
/>

Props

Prop	Type	Default	Description
title	string	-	The title of the navigational card
href	string	-	The href of the navigational card
description	string	-	The description of the navigational card
icon	React.ReactNode	-	The icon of the navigational card
className	string	-	Additional CSS classes