Astro-sections NPM

🚀 Astro sections

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.

How To Use

In any of your Astro pages, import the sections you need

---
/* Import the components you need */
import { Section, ImageSection, HalfSection, EmptySection, Hero } from "astro-sections";
---

<html lang="en">
	<head>
		<SEO title="A Very Descriptive Title" description="A heavily optimized description full of well-researched keywords." />
	</head>
	<head>
		<body>
			<Hero {...props} />
			<ImageSection {...props} />
			<HalfSection {...props} />
			<EmptySection {...props} />
			<Section {...props} />
		</body>
	</head>
</html>

Supported Props

EmptySection

Propname	Type	Default	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

npm.io

Section

Propname	Type	Default	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

npm.io

Half Section

Propname	Type	Default	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