# astro-sections
> Sections for astro
Latest version **0.0.7** (published 2022-08-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install astro-sections
pnpm add astro-sections
yarn add astro-sections
bun add astro-sections
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.7 |
| Published | 2022-08-28 |
| First published | 2022-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Giulio Zanchetta |
| Maintainers | zank |
| Keywords | astro-component, astro, astro-sections |
## Links
- npm: https://www.npmjs.com/package/astro-sections
- Repository: https://github.com/warpsio/astro-sections
- Issues: https://github.com/warpsio/astro-sections/issues
- npm.io page: https://npm.io/package/astro-sections
## Dependencies (3)
- [astro-icon](https://npm.io/package/astro-icon.md) ^0.7.3
- [astro-image](https://npm.io/package/astro-image.md) ^0.0.6
- [astro-localization](https://npm.io/package/astro-localization.md) ^0.0.6
## Recent versions
- 0.0.7 (latest) — 2022-08-28
- 0.0.6 — 2022-08-06
- 0.0.5 — 2022-02-18
- 0.0.4 — 2022-02-18
- 0.0.2 — 2022-01-22
- 0.0.1 — 2022-01-22
## README
# 🚀 Astro sections
### [📘 Documentation →](https://astros.warps.it/documentation)
### [🧑🚀 Astro website →](https://astro.build/)
This components are designed to allow creation of structured website sections. They define a set of standard classes to be easyly customizzable, you can check an example here: https://github.com/warpsio/astros.
It works for every website but it's designed to integrate seamlessy with [warpsio templates](https://github.com/warpsio).
## How To Use
In any of your Astro pages, import the sections you need
```astro
---
/* Import the components you need */
import { Section, ImageSection, HalfSection, EmptySection, Hero } from "astro-sections";
---
```
## Supported Props
### EmptySection
| Propname | Type | Default | Required | Description |
| --------- | ------ | ------- | -------- | ------------------------------------ |
| id | string | null | | Id to add to section element |
| class | string | null | | Class to add to section element |
| alt | bool | false | | Add "alt" class to element |
| container | bool | true | | Add "container" class |
### Section
| Propname | Type | Default | Required | Description |
| ----------- | ------ | ------- | -------- | ----------------------------------------------------------------------------- |
| id | string | null | | Id to add to section element |
| title | string | null | | Title, check position in the chart (Have to pass lmap for localization) |
| subtitle | string | null | | subtitle, check position in the chart (Have to pass lmap for localization) |
| description | string | null | | Description, check position in the chart (Have to pass lmap for localization) |
| class | string | null | | Class to add to section element |
| alt | bool | false | | Add "alt" class to element |
| container | bool | true | | Add "container" class |
| lmap | Object | {} | | Localization map, needed for localization of title, subtitle and description |
### Half Section
| Propname | Type | Default | Required | Description |
| ----------------- | ------ | ------- | -------- | ----------------------------------------------------------------------------- |
| id | string | null | | Id to add to section element |
| title | string | null | | Title, check position in the chart (Have to pass lmap for localization) |
| subtitle | string | null | | subtitle, check position in the chart (Have to pass lmap for localization) |
| description | string | null | | Description, check position in the chart (Have to pass lmap for localization) |
| class | string | null | | Class to add to section element |
| alt | bool | false | | Add "alt" class to element |
| container | bool | true | | Add "container" class |
| inverted | bool | true | | Invert position of the 2 sides |
| verticalAlignment | string | "start" | | Vertical alignment for title and description side |
| lmap | Object | {} | | Localization map, needed for localization of title, subtitle and description |
---
_Source: https://npm.io/package/astro-sections · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._