# ContentTeaser

The ContentTeaser is a basic multi-purpose teaser. It can be used as a link to an internal or external page. Usually used inside a LayoutGrid.

Example

TODO

Storyblok

This component exists in Storyblok too.

blok: {
  //required
  title: '',
  image: {
    image: ''
  },
  text: '',
  // required
  link: {
    linktype: 'story',
    cached_url: ''
  },
}

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

# Dependencies

This component uses a filter, a multi-language variable and a standard Nuxt component.

# Filter

absolutPath.filter.js: For teasers with link.linktype: story Storyblok only returns the slug (e.g. blog/), the filter makes sure that we always use the absolute path /blog and don't end up with something like this contact/blog.

# i18n

Make sure you have a readMore defined in your language files under a11y:

// e.g. nuxt-starter/i18n/de.js
export default {
  ...
  a11y: {
    ...
    // `{title}` a paramter, no need to translate it.
    readMore: 'Mehr erfahren über {title}'
  }
}

1
2
3
4
5
6
7
8
9

# Components

nuxt-link

# Props

Name	Type	Required	Default
title	`String`	`true`	-
image	`Object`	`false`	`null`
text	`String`	`false`	`""`
link	`Object`	`true`	-

# Variants

None.

# Example

Good

<!-- Use the prop to pass the content to the component. -->
<ContentTeaser
  title="Top 10 Components"
  :image="{
    image:
      'image.jpg'
  }"
  text="A list of the best components."
  :link="{ linktype: 'story', cached_url: 'blog' }"
/>

<ContentTeaser
  title="Nueva"
  :image="{
    image:
      'image.jpg'
  }"
  text="The always new agenxy."
  :link="{ linktype: 'url', cached_url: 'https://nueva.ch' }"
/>

<!-- Pass data from an object -->
<ContentTeaser
  :title="blok.title"
  :image="blok.image"
  :text="blok.text"
  :link="blok.link"
/>

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

Bad

<!-- Use the props for passing the content.
  This Component does not have a slot. -->
<ContentTeaser>
  lorem ipsum
</ContentTeaser>

<!-- link and title props are required -->
<ContentTeaser />

1
2
3
4
5
6
7
8

# TODO

Replace img with div and responsive background image