LANDINGPAGE-MODULE (component )
src/app/shared/components/landingpage-module/templates
Demo Section
Each variation will be presented in the following section.
Readme
landingpageModule (component)
Description
Component to handle Css for Landingpage views
Requirements
Veams#5.0.0
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/landingpage-module
Fields
landingpage-module.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.landingpageModuleClasses | String | '' |
Modifier classes for component |
| settings.landingpageModuleContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.landingpageModuleField | String | Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $landingpage-module-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-landingpage-module:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
landingpage-module.hbs
<div class="c-landingpage-module{{#if settings.landingpageModuleContextClass}}--{{settings.landingpageModuleContextClass}}{{else}}--default{{/if}}{{#if settings.landingpageModuleClasses}} {{settings.landingpageModuleClasses}}{{/if}}"
data-css="c-landingpage-module">
<h2>Überschrift für Landingpage H2</h2>
</div>
Data File
landingpage-module.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"landingpageModuleContextClass": "default",
"landingpageModuleClasses": ""
},
"content": {}
}
}
}
Styles
landingpage-module.scss
/* ===================================================
component: landingpage-module
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-landingpage-module"] {
h2 {
@include headline-h2-styles();
font-family: $font-bold;
color: $color-dark;
font-weight: 700;
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-landingpage-module--default {
}
HTML Output
Default
<div class="c-landingpage-module--default" data-css="c-landingpage-module">
<h2>Überschrift für Landingpage H2</h2>
</div>