Add a Section

Use a Section component to easily fit components into the structure and design of a LightNet page. It takes care of the spacing and the layout of its content. Also includes an optional title. This title is displayed above the section content in a well 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("x.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. Is displayed above the section content.

maxWidth

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

A Section grows its width with the screen size. It stops growing according to the maxWidth property. After this 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 e.g. /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. Possible are the following margins:

• 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.