Reducing Hero Spacing

If you remove the primary call-to-actions (or section links) from the hero component, you can tighten up the resulting empty vertical space with some custom CSS.

Add CSS overrides

If you don’t have one yet, create a file at src/styles/custom.css and add the following CSS overrides:

src/styles/custom.css

/* Reduce the overall bottom padding inside the hero component itself */
.hero {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
}

/* Tighten the gap between the hero container and the next Markdown elements */
.hero+.sl-markdown-content {
    margin-top: 1rem !important;
}

Register the custom CSS file

Register the custom CSS file in your astro.config.mjs:

astro.config.mjs

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      customCss: ['./src/styles/custom.css'],
    }),
  ],
});