iconDirEasy
UI/Components

Card

How to customize the Item Card

DirEasy's Item Card is displayed in a list style by default, which is suitable for apps like Product hunter, but you can use the grid, big card style and hide the comment button, upvote button, and rank text if you want to build a Directory app.

lib/constants.ts
// custom project card style
export const PROJECT_CARD_STYLE = {
  HIDE_COMMENT: false, // Hide the comment button
  HIDE_UPVOTE: false, // Hide the upvote button
  HIDE_RANK: false, // Hide the rank text
  COLLECTION_PROJECT_BIG_CARD: true, // Big card for projects in collection
  BIG_CARD: false, // Big card for projects, which is recommended to be set to true for directory apps
} as const
 
// custom project list style
export const PROJECT_LIST_STYLE = {
  GRID_COLUMNS: 1, // Number of columns in the grid
} as const
 
// custom collections list style
export const COLLECTION_LIST_STYLE = {
  GRID_COLUMNS: 3, // Number of columns in the grid for collections
} as const
 
// custom collection project list style
export const COLLECTION_PROJECT_LIST_STYLE = {
  GRID_COLUMNS: 3, // Number of columns in the grid for collections
} as const

Big Card Card