Sections

Overview

With NjSection you are able to define constraints in your web layouts and on a given ruleset. For example you want that your landingpage have a max width of 1400px and a centered position of all your content. With NjSection you can define this constraints and use it on all your pages.

This wrapper component is used to position and size the content within. By default, it renders a div element.

The NjSection component helps with the following use cases:

Set width and position of your inner content with flexbox
Add a background image or background color to your section
Add optional default spacing to your section with spacingY to get consistent section spacings.

Basic example

NjSection consists of a wrapper and a container theme prop which you can customize as your design requires.

<NjSection
  :fixedClasses="{ 
      wrapper: 'flex bg-cover bg-no-repeat aspect-ratio-16/9' 
      container: 'max-w-3xl mx-auto md:px-6 xl:px-8' 
  }">
  My Section
</NjSection>

You can also use and adapt one of the given default (boxed, fullWidth, constrained) variants

<NjSection
  variant="constrained"
  :fixedClasses="{ container: 'max-w-3xl' }"
>
  My Section
</NjSection>

If you're using boxed or constrained variant make sure to add a `max-w-` prop to it. We don't add that by default.

Various Examples

Boxed

Full-width on mobile, constrained with padded content

Full Width

Full-width on both views

Constrained

Constrained with padding on both views

Custom

Custom boxed Section

Component Api

<NjSection />

Props

Prop	Default	Description
`tag`	`div`	`String` User `div` or `section`

Theme Props

Prop	Description
`wrapper`	Outer element
`container`	Direct child of `wrapper`

Prop: `variants`
Default:

return {
    boxed: {
        wrapper: 'flex justify-center',
        container: 'w-full mx-auto md:px-6 xl:px-8'
    },
    fullWidth: {
        wrapper: 'flex justify-center',
        container: 'w-full'
    },
    constrained: {
        wrapper: 'flex justify-center',
        container: 'w-full px-10'
    }
}

Theme Configuration

Example usage of theme configuration

import Vue from 'vue'
import Nujek from '~nujek-ui/plugin.js'
import { NjSection } from '~nujek-ui/components'

const settings = {
  NjSection: {
    component: NjSection,
    props: {
      fixedClasses: {
        // https://github.com/tailwindlabs/tailwindcss-typography#overriding-max-width
        wrapper: 'w-full flex justify-center',
        container: 'w-full relative'
      },
      variants: {
        'section-2xl': {
          wrapper: 'py-8 md:py-10 xl:py-12',
          container: 'max-w-screen-2xl'
        },
        'section-2xl-no-space': {
          wrapper: 'w-full flex justify-center w-full',
          container: 'w-full max-w-screen-2xl'
        },
        'section-xl-no-space': {
          wrapper: 'w-full flex justify-center w-full',
          container: 'w-full max-w-screen-xl'
        },
        'section-xl': {
          wrapper: 'py-8 md:py-10 xl:py-12',
          container: 'max-w-screen-xl px-6'
        },
        'section-xl-no-mobile-x-space': {
          wrapper: 'py-8 md:py-10 xl:py-12',
          container: 'max-w-screen-xl sm:px-6'
        },
        'section-xl-margin': {
          wrapper: 'my-8 md:my-10 xl:my-12',
          container: 'max-w-screen-xl px-6'
        },
        'section-lg': {
          wrapper: 'py-8 md:py-10 xl:py-12',
          container: 'max-w-screen-lg px-6'
        },
        spacer: {
          wrapper: 'py-8 md:py-10 xl:py-12',
          container: ''
        }
      }
    }
  }
}

Vue.use(Nujek, settings)

Introduction Images

Getting started

Components