# LayoutSection

The LayoutSection provides a HTML <section> with a <h2> title. It serves as a container to structure content components in a semantic section-based structure.

Example

Storyblok

This component exists in Storyblok too. Uses custom Storyblok plugin "section-title".

Storyblok title field options (can be changed in the field settings):

default_heading: 2 (can be changed if heading_selectable === true)
heading_selectable: false (true provides an aditional select field)

blok: {
  // required
  title: {
    // Custom plugin key-val-list
    title: '',
    heading: 2,
    is_hidden: false
  },
  // can be empty
  body: []
}

1
2
3
4
5
6
7
8
9
10
11

# Dependencies

This component depends on a lot of content and layout components.

# Components

Can render:

# Props

Name	Type	Required	Default	Description
title	`Object`	`true`	-	`{title: '', heading: 2, is_hidden: false}`
body	`Array`	`false`	`[]`	Storyblok blok with components.

# Slots

You can use the slot if you need a section instead of the body array if you need a section outside of the Storyblok context.

1 unnamed slot

# Variants

None.

# Example

Good

<!-- Manual usage, without body array -->
<LayoutSection
  :title="{
    title: 'CSS Icons',
    heading: '2',
    is_hidden: false
  }"
>
  <!-- Your content goes here -->
  <p>Lorem ipsum</p>
</LayoutSection>

<!-- nuxt-starter/pages/blog/index.vue -->
<!-- Usually rendered by some container component
  (nuxt-starter/pages components or LayoutPage)
  with Storyblok data -->
<main class="o-grid-container">
  <!-- Will be rendered
    if item.component === "LayoutSection" -->
  <component
    :is="item.component"
    v-for="item in story.content.content"
    :key="item._uid"
    v-editable="item"
    v-bind="item"
  />
</main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Bad

<!-- The title is an object, not a string. -->
<LayoutSection title="Section 1">
  lorem impsum
</LayoutSection>

<!-- Use the slot to set content manually.
  The body array expects component objects
  as delivered by Storyblok. -->
<LayoutSection
  title="{
    title: 'CSS Icons',
    heading: '2',
    is_hidden: false
  }"
  :body="['lorem ipsum']"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16