A landing page made with a single tag, ultra customisable via slots.
Notice: this demo used a copyrighted SVG logo through a HREF link in the code (the logo itself wasn't part of this repository), still visible on GIF images for demo purposes. It's now been removed, to avoid confusion. Now a cute kitten would show up instead. 🐱
This demo has one goal and one goal only: gain the love and conquer the hearts of a group of unconvinced yet creative skeptics that Web Components can be used to manage web content effortlessly... by anyone!
Web Components are extremely powerful. For this particular scenario —with the web content management mindset in place— the philosophy was about creating a simple and contentful experience by default, which could be tweaked later for other content.
This is the landing page used for inspiration:
https://www.ing.es/hipotecas/simula-hipoteca.html.
This is all the markup you need:
<ing-landing-hipoteca></ing-landing-hipoteca>
I've tried to keep it simple (stupid, as in KISS). Just LitElement for defining Web Components and Parcel for bundling and serving the app. For consistent code I used Standard as linter.
But you don't really need to know any of that to start, keep reading...
Want to give it a shot? Go ahead: click here and explore it within the warmth of your browser 😌
Advanced users
If you want to execute locally instead, clone the repo, install dependencies and then just type:
npm start
For the following steps to work, just stay on markup.html
This will change the main title
<ing-landing-hipoteca>
<slot slot="titulo">Hipoteca LIMÓN 🍋</slot>
</ing-landing-hipoteca>
This will empty the subtitle
<ing-landing-hipoteca>
<slot slot="subtitulo"></slot>
</ing-landing-hipoteca>
This will paint a little ball of kitten furr instead of the logo and your heart will melt 😻
<ing-landing-hipoteca>
<img slot="logo" src="http://placekitten.com/300/100" />
</ing-landing-hipoteca>
This will remove the first notice and change the text of the second notice
<ing-landing-hipoteca>
<slot slot="hipoteca-1-atencion"></slot>
<slot slot="hipoteca-2-atencion">Esta hipoteca mola!</slot>
</ing-landing-hipoteca>
This will change the title, description and floating notice of the 2nd mortgage card
<ing-landing-hipoteca>
<slot slot="hipoteca-2-atencion">Esta ha bajado más!</slot>
<slot slot="hipoteca-2-titulo">Hipoteca Jamón y Queso</slot>
<slot slot="hipoteca-2-descripcion">
Los 10 primeros añitos de nuestra relación a 1.49% TIN,</br>
luego manda el euríbor al que hay que poner 0.99%,</br>
y nos obligan a decirte que eso en total es TAE variable del 2.16%<sup>3</sup>
</slot>
</ing-landing-hipoteca>
By design, these are the same for any mortgage card and therefore this markup will change the content in all of them. This prevent unnecessary copy errors. This markup will change all of them:
<ing-landing-hipoteca>
<slot slot="condiciones">
Necesitamos tu nómina y que contrates seguros de vida y hogar. Todo queda en casa!
</slot>
<slot slot="boton">
Empezar!
</slot>
<slot slot="mas-informacion">
+ INFO
</slot>
</ing-landing-hipoteca>
This will change the title of the 2nd list of benefits
<ing-landing-hipoteca>
<slot slot="ventajas-2-titulo">
Cero comisiones
</slot>
</ing-landing-hipoteca>
This will update the 1st list of benefits, and instead use 3 different benefits
<ing-landing-hipoteca>
<slot slot="ventajas-1-lista">
<ing-ventaja>
<slot slot="titulo">0 %</slot>
<slot slot="subtitulo">Comisión por reembolso o amortización anticipada total o parcial</slot>
</ing-ventaja>
<ing-ventaja>
<slot slot="titulo">0 %</slot>
<slot slot="subtitulo">Comisión de apertura</slot>
</ing-ventaja>
</slot>
</ing-landing-hipoteca>
This will remove all the descriptions from the 1st list of benefits
<ing-landing-hipoteca>
<slot slot="ventajas-1-lista-1-descripcion"></slot>
<slot slot="ventajas-1-lista-2-descripcion"></slot>
<slot slot="ventajas-1-lista-3-descripcion"></slot>
<slot slot="ventajas-1-lista-4-descripcion"></slot>
</ing-landing-hipoteca>
This will add a 5th benefit to the 2nd list of benefits
<ing-landing-hipoteca>
<ing-ventaja slot="ventajas-2-lista-extra">
<slot slot="titulo">0 €</slot>
<slot slot="subtitulo">Gastos inventados</slot>
<slot slot="descripcion">Sin más gastos sorpresa </slot>
</ing-ventaja>
</ing-landing-hipoteca>
titulo
subtitulo
logo
hipoteca-*-titulo
hipoteca-*-descripcion
condiciones
boton
mas-informacion
ventajas-*-titulo
ventajas-*-lista
ventajas-*-lista-extra
ventajas-*-lista-*-titulo
ventajas-*-lista-*-subtitulo
ventajas-*-lista-*-descripcion
Where *
is a number for the n-item, starting in 1
.
I want to modify/add/remove X thing but it doesn't seem like any of these slots will do the work for me
Sure, ask me what you want to customise opening an issue and I'll do it as soon as I can.
What is Glitch? Are you planning to use Glitch for managing web content?
To the last question: no way! Glitch is just a tool to edit code directly in the browser without much hassle. I think it gives anyone the opportunity to play and explore in ways they might have never thought of before. Find out more bout Glitch in its about page.
Please don't hesitate and open an issue assigning question
as label. I'll answer as soon as I can plus you'll help improve this documentation.