Fylgja component - Section

The Section component is a wrapper component to show content in a sectioned area.

Like a Hero, Banner or just simple section with a different color in the page.

Installation  # 

npm install @fylgja/section

Then include the component in to your code via;

@use "@fylgja/section";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/section/section.css";

How to use  # 

To use the section component create element with the class .section, or use the native html element <section>

<div class="section"></div>

This will create a element with CSS variables, easily customizable, the min-height, background and colors.

So the real power lies in its strength to be customized via CSS variables.

So if you want to build something like a hero, you only need something like this;

<style>
#page-hero {
--height: 500px;
--img: url(https://placeimg.com/1024/500/nature);
--bg: var(--color-theme);
--color: var(--color-on-theme);
padding: 2em 1em;
}
</style>
<section id="page-hero">
<h1>Heading</h1>
<p>Slogan text</p>
</section>

Or make it more fancy via some extra fylgja components. Like the @fylgja/base, @fylgja/container and @fylgja/utilpack.

Example: make a hero component that is realy easily build.

<style>
#page-hero {
--height: 500px;
--img: url(https://placeimg.com/1024/500/nature);
--bg: var(--color-theme);
--color: var(--color-on-theme);
}
</style>
<section id="page-hero" class="flex items-center justify-center py-8">
<div class="container">
<h1 class="mb-0">Heading</h1>
<p class="h5 mt-0">Slogan text</p>
</div>
</section>

Config  # 

Unlike other components, this component fully runs on the power of CSS. And has no mayor config options, except for the theme default version.

$enable-section-theme: true !default;

When enabled it allows you to use the section with the theme color variable class.

<div class="section -theme"></div>

It sets the background color to the $color-theme value, and sets the color to the $color-on-theme value.

Noticed a typo or is something unclear? Help us improve this page on GitHub.