<!-- Error rendering component -->
<!-- (unknown path)
Error: Could not render component '@numbered-title' - component not found. -->
<!-- Template render error: (unknown path)
Error: Could not render component '@numbered-title' - component not found.
at Object._prettifyError (/Users/cedricaellen/Projects/foehn-design-system/node_modules/nunjucks/src/lib.js:32:11)
at /Users/cedricaellen/Projects/foehn-design-system/node_modules/nunjucks/src/environment.js:464:19
at Template.root [as rootRenderFunc] (eval at _compile (/Users/cedricaellen/Projects/foehn-design-system/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:32:3)
at Template.render (/Users/cedricaellen/Projects/foehn-design-system/node_modules/nunjucks/src/environment.js:454:10)
at Environment.renderString (/Users/cedricaellen/Projects/foehn-design-system/node_modules/nunjucks/src/environment.js:313:17)
at Environment.tryCatcher (/Users/cedricaellen/Projects/foehn-design-system/node_modules/bluebird/js/release/util.js:16:23)
at Environment.ret [as renderStringAsync] (eval at makeNodePromisifiedEval (/Users/cedricaellen/Projects/foehn-design-system/node_modules/bluebird/js/release/promisify.js:184:12), <anonymous>:14:23)
at NunjucksAdapter.render (/Users/cedricaellen/Projects/foehn-design-system/node_modules/@frctl/nunjucks/src/adapter.js:96:28)
at ComponentSource._renderVariant (/Users/cedricaellen/Projects/foehn-design-system/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
at _renderVariant.next (<anonymous>)
at onFulfilled (/Users/cedricaellen/Projects/foehn-design-system/node_modules/co/index.js:65:19) -->
<article{% if styleModifier %} class="{{ styleModifier }}"{% endif %}>
<h3><a class="vd-link-invisible" href=“#”>Title here</a></h3>
{% render '@numbered-title' %}
<figure class="vd-teaser-small-img">
{% render '@image--fluid' %}
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
{
"title": "Partager",
"styleModifier": ""
}
@charset 'UTF-8';
@use "sass:math";
.vd-teaser-small {
display: block;
margin: $spacer 0 ($spacer * 2);
padding-bottom: (math.div($spacer, 2));
border-bottom: 1px solid $vd-primary-darker;
&:last-of-type {
border: none;
}
}
.vd-teaser-small-img {
max-width: 100%;
@include media-breakpoint-up(md) {
max-width: 40%;
}
}
Used for example in the agenda list, with dates as title and a description