Customising the home page

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

The home page is built from a small set of files under src/. Open these when you customise it:

File	What to edit here
src/pages/index.js	How the page is assembled (hero + tiles section)
src/pages/index.module.css	Hero layout and hero title colour
src/components/HomepageFeatures/index.js	Tile text, icons, destinations, and the links under the tiles
src/components/HomepageFeatures/styles.module.css	Tile and quick-link styling
docusaurus.config.js	Site title and tagline shown in the hero
src/css/custom.css	Primary colour used by the hero banner

How the page fits together

src/pages/index.js is the home page. It draws the hero, then includes the tiles section from another file.

That include looks like this:

src/pages/index.js

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

info

@site means “from the project root”. The import points at the HomepageFeatures folder, and Docusaurus loads that folder’s index.js.

The page then renders the hero and the features block:

src/pages/index.js

<Layout title={siteConfig.title} description={siteConfig.tagline}>
  <HomepageHeader />
  <main>
    <HomepageFeatures />
  </main>
</Layout>

Part of the page	Source
Coloured banner, title, tagline	HomepageHeader in src/pages/index.js
Tiles and “Browse the documentation” links	HomepageFeatures in src/components/HomepageFeatures/index.js

Change 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 elsewhere in the site metadata.

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

Change 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 (restart the dev server if the change does not appear).

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

Change the tiles

Open src/components/HomepageFeatures/index.js. The tiles come from the FeatureList array near the top of the file. Each object is one tile:

Field	What it sets
title	Tile heading
description	Short line under the heading
to	Where the tile goes when clicked
Icon	Icon from react-icons/md (default in this template)
image	Optional path to a graphic under static/img/ (see below)

src/components/HomepageFeatures/index.js

const FeatureList = [
  {
    title: 'Getting started',
    description: 'A quick orientation to the site and how docs are structured.',
    to: '/docs/template-description/getting-started',
    Icon: MdLightbulbOutline,
  },
  // …
];

Text and destinations

Edit the strings in FeatureList. For a topic on this site, set to to a path such as /docs/…. For an external site, set to to a full https://… URL.

Icons

1. Choose an icon from react-icons Material Design.
2. Add it to the import list at the top of HomepageFeatures/index.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)

If you work with graphics files rather than react-icons components:

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 (same pattern as images in doc topics; see Graphics).
3. On that tile in FeatureList, set an image path and leave out Icon:

src/components/HomepageFeatures/index.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',
},

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; PNG or JPG works too.

Number of tiles

Add or remove objects in FeatureList. The layout uses Infima’s col--4 (three columns across). For two tiles, change that class on the Feature component to col--6; for other counts, pick the matching Infima column class.

Change the links under the tiles

In the same HomepageFeatures/index.js file, the QuickLinks array drives the pipe-separated links under the H2:

src/components/HomepageFeatures/index.js

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'},
];

1. Edit each label and to as needed.
2. To rename the section heading, change the text inside <Heading as="h2"> in that file (currently “Browse the documentation”).

Spacing and separators for this block are in src/components/HomepageFeatures/styles.module.css (classes such as .quickLinksSection, .quickLinksTitle, .quickLinks, .quickLinksSep).

Quick reference

Goal	File and place
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 copy, links, icons	HomepageFeatures/index.js → FeatureList
Quick links and H2 text	HomepageFeatures/index.js → QuickLinks and the H2
Tile / link layout styling	HomepageFeatures/styles.module.css

Related topics

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