Customising the home page

Use this topic when you are adapting the landing page at / for a portal.

How the page fits together

src/pages/index.js is the home route. It draws the hero, then includes the features section:

src/pages/index.js

import HomepageFeatures from '@site/src/components/HomepageFeatures';

info

@site means “from the project root”. Docusaurus loads that folder’s index.js, which reads tiles and links from content.js.

Element	File
Tiles, quick links, and the Browse… heading	src/components/HomepageFeatures/content.js. Day-to-day home page copy for tiles and links lives in this file. The page layout (index.js files) only wires that content into React.
Hero title and tagline	docusaurus.config.js → title, tagline
Hero banner colour	src/css/custom.css → --ifm-color-primary
Hero title colour / layout	src/pages/index.module.css
Tile and link styling	src/components/HomepageFeatures/styles.module.css

Changing the hero title and tagline

1. Open docusaurus.config.js.
2. Edit title and tagline:

docusaurus.config.js

title: '3di Docusaurus Template',
tagline: 'Complexity made clear',

The home page reads those values with useDocusaurusContext() and shows them in the hero. The same title and tagline are reused in site metadata.

To adjust the hero title colour (white by default for contrast on the banner), edit .heroTitle in src/pages/index.module.css.

Changing the hero colour

The banner uses the Infima class hero hero--primary, so it follows the site primary colour.

1. Open src/css/custom.css.
2. Update --ifm-color-primary and the related --ifm-color-primary-* shades you use.
3. Refresh the site.
   If the change does not appear, restart the dev server.

That primary colour also drives accents such as tile icons and link hover.
For logo, favicon, and social card, see Branding the portal.

Changing tiles and quick links

Open src/components/HomepageFeatures/content.js. That file holds:

• FeatureList: the tiles
• quickLinksTitle: the H2 under the tiles
• QuickLinks: the pipe-separated links

Tiles (FeatureList)

1. Open src/components/HomepageFeatures/content.js.
2. Find the FeatureList array. Each object is one tile.
3. Update the tile fields:

Field	What to set
title	Tile heading
description	Short line under the heading
to	Path on this site (/docs/…) or full https://… URL
Icon	Icon from react-icons/md (default in this template)

src/components/HomepageFeatures/content.js

{
  title: 'Getting started',
  description: 'A quick orientation to the site and how docs are structured.',
  to: '/docs/template-description/getting-started',
  Icon: MdLightbulbOutline,
},

4. Save the file and refresh the home page.

Changing a tile icon

1. Choose an icon from react-icons Material Design.
2. Add it to the import list at the top of content.js (same style as MdLightbulbOutline, MdMenuBook, MdSchool).
3. Set that name as the tile’s Icon value.

Icon and tile heading colour follow --ifm-color-primary in styles.module.css.

Using your own icon image files (PNG, SVG, JPG)

1. Save the icon under static/img/, for example, static/img/home/getting-started.svg.
2. The site serves that file at /img/home/getting-started.svg.
   The pattern is the same as images in doc topics, see Graphics.
3. On that tile in FeatureList, set an image path and leave out Icon:

src/components/HomepageFeatures/content.js

{
  title: 'Getting started',
  description: 'A quick orientation to the site and how docs are structured.',
  to: '/docs/template-description/getting-started',
  image: '/img/home/getting-started.svg',
},

tip

Aim for artwork that stays clear at about 40×40 px. .featureIcon in styles.module.css sizes the image to 2.5rem.
SVG scales cleanly, and PNG or JPG work too.

Changing the number of tiles

1. Add or remove objects in FeatureList.
2. The layout uses Infima’s col--4 (three columns across).
   For two tiles, open HomepageFeatures/index.js and change that class on the Feature component to col--6.
3. For other counts, pick the matching Infima column class in the same place.

Quick links (QuickLinks)

1. Open src/components/HomepageFeatures/content.js.
2. If you want a different section heading, edit quickLinksTitle
3. In the QuickLinks array, edit each label and to:

src/components/HomepageFeatures/content.js

export const quickLinksTitle = 'Browse the documentation';

export const QuickLinks = [
  {label: 'Intro', to: '/docs/template-description/getting-started'},
  {
    label: 'Text elements',
    to: '/docs/template-description/create-content/basic-text-elements',
  },
  {label: 'Creating topics', to: '/docs/template-description/create-content/creating-topics'},
];

4. Save the file and refresh the home page.

Style reference (styles.module.css)

Tile and quick-link look and spacing live in src/components/HomepageFeatures/styles.module.css. Edit the classes below when you need more than copy changes.

Class	What it controls
.features	Outer section around tiles and quick links (padding, full width)
.featureTile	Tile card: padding, border, hover shadow and lift
.featureIcon	Tile icon size (2.5rem) and primary colour
.featureTile h3	Tile heading colour (primary)
.quickLinksSection	Block under the tiles: top margin, side padding (aligns with left tile), left alignment
.quickLinksTitle	Space under the Browse… H2
.quickLinks	Link row font size and line height
.quickLinksSep	Pipe separator colour between links

Hover shadow colours for light and dark mode are set on .featureTile:hover and [data-theme='dark'] .featureTile:hover in the same file.

Quick reference

Goal	File and place
Tile copy, links, icons, section heading	HomepageFeatures/content.js
Hero title / tagline	docusaurus.config.js → title, tagline
Hero banner colour	src/css/custom.css → --ifm-color-primary
Hero title colour	src/pages/index.module.css → .heroTitle
Tile / link layout styling	HomepageFeatures/styles.module.css

Related topics

• Branding the portal
• Customising dark theme
• Creating pages
• Customising the template