Custom Cards
Some custom pre-styled cards
Standout Card
This is a standout card.
$ Terminal Card
This is a terminal card.
Website Card
This is a website card.
The StandoutCard, TerminalCard, and WebsiteCard components are pre-styled cards that can be used to display content in a visually appealing way.
Check out the Card page for the base card component.
StandoutCard
Standout Card
This is a standout card.
The StandoutCard component is made to stand out with a unique design.
javascript
1import { StandoutCard } from "@/components/molecules/CustomCards"; 2 3<StandoutCard> 4 <h2>Standout Card</h2> 5 <p>This is a standout card.</p> 6</StandoutCard>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the card. |
| borderRadius | string | "2xl" | The border radius of the card. |
| outerClassName | string | "" | Additional Tailwind utility classes. |
| innerClassName | string | "" | Additional Tailwind utility classes. |
| ...props | object | - | Any other valid HTML attributes for the card. |
TerminalCard
$
Terminal Card
This is a terminal card.
The TerminalCard component is designed to resemble a terminal.
javascript
1import { TerminalCard } from "@/components/atoms/CustomCards"; 2 3<TerminalCard> 4 <span>Terminal Card</span> 5 <p>This is a terminal card.</p> 6</TerminalCard>
Wrap the first line in a <span> tag to make it part of the command line.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the card. |
| terminalText | string | "$ " | The text to display before the content. |
| className | string | "" | Additional Tailwind utility classes. |
| ...props | object | - | Any other valid HTML attributes for the card. |
WebsiteCard
Website Card
This is a website card.
The WebsiteCard component is styled to look like a website.
javascript
1import { WebsiteCard } from "@/components/atoms/CustomCards"; 2 3<WebsiteCard> 4 <span>Website Card</span> 5 <p>This is a website card.</p> 6</WebsiteCard>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content of the card. |
| showSearchBar | boolean | true | If true, shows a search bar. |
| searchPlaceholder | string | "Search" | The placeholder text for the search bar. |
| className | string | "" | Additional Tailwind utility classes. |
| ...props | object | - | Any other valid HTML attributes for the card. |