Add a Section

Use a Section component to fit content into the structure and design of a LightNet page. It handles spacing and layout and also includes an optional title. This title is displayed above the section content in a clearly visible font size.

You can add a section to your page by adding the following code:

---
import { Page, Section } from "lightnet/components"

const { t } = Astro.locals.i18n
---
<Page>
  <Section title={t("section.title")}>
    {/* Add components and HTML here */}
  </Section>
</Page>

Reference

The Section component has the following properties:

title

type: string
example: "My section title"
required: false

The title of the section. It is displayed above the section content.

titleHref

type: string
example: "/en/books"
required: false

Makes the section title a link to the provided URL. Useful for linking to pages with more content.

maxWidth

type: "wide" | "narrow"
example: "narrow"
required: false
default: "wide"

A Section grows with the screen size until it reaches the width defined by maxWidth. After that, it is centered on the screen. The maxWidth property can be set to wide or narrow.

• wide (1280 px): this is used as the maximum width of the homepage. This section aligns to the left and right side of the header bar’s content.
• narrow (768 px): this is used as the maximum width of the details pages.

id

type: string
example: "my-section"
required: false

The ID of the section. This can be used to link to the section, for example /en/about#my-section.

marginTop

type: "sm"|"lg"|"none"
example: "sm"
required: false
default: "lg"

Sets the spacing between the section and the element above. The following margin values are supported:

• sm: small spacing. Used on the details page.
• lg: large spacing. Used on the homepage.
• none: no spacing.

className

type: string
example: "py-4 bg-gray-100"
required: false

Additional CSS classes, separated by spaces, to style the section. The classes are applied to the section’s container element.