NeoGridBox Component

The NeoGridBox component allows you to create a responsive grid of boxes, each with an image, title, description, and link. You can customize the size, colors, and behavior of each box, and the grid will adjust automatically.

Installation

Include the NeoGridBox component in the VitePress installation and register it (globally or per scope, but globally is the most comfortable option).

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import NeoNeoGridBox from './components/NeoGridBox.vue'

export default {
    extends: DefaultTheme,
    enhanceApp({app}) {
        app.component('NeoGridBox', NeoGridBox)
    }
}

Basic usage

The NeoGridBox component accepts an array of items via the :items prop. Each item can have several properties such as title, description, image, and link.

vue

<NeoGridBox :items="[
  {
    title: 'Box 1',
    description: 'This is the first box with an explanatory description.',
    image: '/images/icon/firewall.png',
    link: '#',
    linkText: 'More information'
  },
  {
    title: 'Box 2',
    description: 'This is the second box with a different description.',
    image: '/images/branding/icon/blue-transparent.svg',
    link: '#',
    linkText: 'View details'
  },
  {
    title: 'Box 3',
    description: 'This is the third box with another description.',
    image: 'https://api.iconify.design/mdi/rocket-launch.svg?height=512&color=%234a6cf7',
    link: '#',
    linkText: 'Get started'
  }
]" />

Box 1

This is the first box with an explanatory description.

Prop	Type	Default value	Description
items	Array	(required)	Array of objects representing each box
columns	Number	3	Number of columns in the grid
gap	String	'1.5rem'	Space between grid elements

Property	Type	Description
title	String	Box title
description	String	Description text
image	String	Path to the image
component	Component	Vue component to use as an icon instead of an image
link	String	URL for the link
linkText	String	Text for the link
linkIcon	String/Boolean	Custom SVG code for the link icon or `true` to use the default arrow icon
iconPosition	String	Position of the link icon. Can be 'left' or 'right' (default is 'right')
size	Object	Box size, e.g., `{ cols: 2, rows: 1 }`
backgroundColor	String	Custom background color for the box
titleColor	String	Custom color for the title
textColor	String	Custom color for the description text
linkColor	String	Custom color for the link
disableHoverEffect	Boolean	Disables the hover effect (elevation and shadow) when set to true (default true)
hoverBackgroundColor	String	Changes the background color on hover to the specified color
fullBoxClickable	Boolean	Makes the entire box clickable, not just the link, when set to true
hoverTextColor	String/Boolean	Custom color for the text on hover when the box is fully clickable. Set to `false` to disable text color change on hover
imageSize	String/Number	Custom size for the image or icon. Can be a number (pixels) or a string (e.g., '50%')
imageAlign	String	Alignment of the image or icon. Can be 'left', 'center', or 'right'
titleSize	String/Number	Custom size for the title. Can be a number (pixels) or a string (e.g., '1.5rem')
titleAlign	String	Alignment of the title. Can be 'left', 'center', or 'right'
textSize	String/Number	Custom size for the description text. Can be a number (pixels) or a string (e.g., '1rem')
textAlign	String	Alignment of the description text. Can be 'left', 'center', or 'right'
linkSize	String/Number	Custom size for the link. Can be a number (pixels) or a string (e.g., '0.9rem')
linkAlign	String	Alignment of the link. Can be 'left', 'center', or 'right'
className	String	Additional CSS class name to be applied to the box
alignVertically	Boolean	Controls vertical alignment of the content. Set to `false` to disable vertical centering (default is `true`)

NeoGridBox Component ​

Installation ​

Basic usage ​

Box 1

Box 2

Box 3

Customizing the grid layout ​

Box 1

Box 2

Custom sizes ​

Large box

Small box

Tall box

Regular box

Custom colors ​

Default background

Custom background

Custom title color

Custom text color

Custom link color

All custom colors

External URLs as images ​

Icon from external API

Normal local image

Another external icon

Interactive features ​

No hover effect

Background change on hover

Fully clickable box

Combined features

Text color change on hover ​

Default behavior

Custom hover text color

Color change disabled

Sizes and alignment of elements ​

Custom image size

Custom title size and alignment

Custom description size and alignment

Custom link size and alignment

Image aligned to the left

Image aligned to the right

Optional elements ​

Only image and title

Only title and link

Title, description, and link

Vue components as icons ​

Discord Icon

Mail Icon

Custom icon size

Link icons ​

Default icon (right side)

Icon on the left side

Custom SVG icon

Custom combinations ​

Complete design with customization

Clickable box with custom style

Business design

Product card style

Vertical alignment ​

Default centered content

Vertical centering disabled

Component API ​

Props ​

Item properties ​

NeoGridBox Component

Installation

Basic usage

Customizing the grid layout

Custom sizes

Custom colors

External URLs as images

Interactive features

Text color change on hover

Sizes and alignment of elements

Optional elements

Vue components as icons

Link icons

Custom combinations

Vertical alignment

Component API

Props

Item properties