# LayoutSubSection

The LayoutSubSection provides a HTML <section> with a <h3> title. It serves as a container to structure content components in a semantic section-based structure. In order to get the heading structure right this component should be wrapped inside a container providing a <h2>, like LayoutSection.

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: 3 (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: 3,
    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:

# Required by

LayoutSection

# Props

Name	Type	Required	Default	Description
title	`Object`	`true`	-	`{title: '', heading: 3, 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
  Make sure the component's wrapper
  provides an <h2>.-->
<LayoutSection
  :title="{
    title: 'Section',
    heading: '2',
    is_hidden: false
  }"
>
  <LayoutSubSection
    :title="{
      title: 'Sub Section',
      heading: '3',
      is_hidden: false
    }"
  >
    <!-- Your content goes here -->
    <p>Lorem ipsum</p>
  </LayoutSubSection>
</LayoutSection>

<!-- Example without LayoutSection -->
<div>
  <h2>Section</h2>
  <LayoutSubSection
    :title="{
      title: 'Sub Section',
      heading: '3',
      is_hidden: false
    }"
  >
    <!-- Your content goes here -->
    <p>Lorem ipsum</p>
  </LayoutSubSection>
</div>

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

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

Bad

<!-- This component provides an <h3> and
  should therefore not be places on the
  first level. It should be wrapped
  in a container with an <h2>, e.g. LayoutSection -->
<main>
  <LayoutSection
    :title="{
      title: 'CSS Icons',
      heading: '3',
      is_hidden: false
    }"
  >
    <!-- Your content goes here -->
    <p>Lorem ipsum</p>
  </LayoutSection>
</main>

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

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

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
28
29
30
31
32
33