Below you will find all components available in lp-kit in a Test version.

100% LP-KIT Jquery Dependency Spacing adjusted

Component label: [lp-kit] 001 Header with centered text + video popup

Component name: 001-lp-kit-header-centered-video-popup Dev owner: Artur

Notes: You can specify animated phrases highlighted in blue color + add a video popup linked to the second CTA

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 002 Short image full-width

Component name: 002-lp-kit-short-image-full-width Dev owner: Artur

Notes: This component is usually added to 001-lp-kit-header-centered-video-popup

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 003 Header with text and image or video

Component name: 003-lp-kit-header-w-text-and-image Dev owner: Artur

Notes: It's the most common header component we use 🙂

Dev

Bug description: I believe class .header is a bit to generic, and might lead us to some problems

Dev

Bug description: Margins can be replaced with lp-kit classes

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 004 Features with icons row

Component name: 004-lp-kit-features-with-icons-row Dev owner: Artur

Notes: You can define the number of icons, usually this components goes straight under the header

Dev

Bug description: I believe colors of a numbers should be controlled by class name. It will help us #1 Keep our colors consistent #2 Replace color schemes with ease for ex. TuoTempo CSS files

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 005 Two transparent cards with text

Component name: 005-lp-kit-2-transparent-cards-with-text Dev owner: Artur

Notes: Both cards support full rich text editor

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 006 Three transparent cards with text

Component name: 006-lp-kit-3-transparent-cards-with-text Dev owner: Artur

Notes: All cards support full rich text editor

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 007 Centered text

Component name: 007-lp-kit-centered-text Dev owner: Artur

Notes: Standard rich text editor. You can select the option to put it full-width (to embed Typeform codes, for example)

Dev

Bug description: We are gonna remove "show module" toggle when we will get rid of static templates

👇 This is how it looks 👇

100% LP-KIT Jquery Dependency Spacing adjusted

Component label: [lp-kit] 008 Image with text and dropdowns

Component name: 008-lp-kit-image-with-text-and-dropdowns Dev owner: Artur

Notes: You can add doctor's quote under the image

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 009 Text & image in two columns

Component name: 009-lp-kit-text-image-2-columns Dev owner: Artur

Notes: You can add featured numbers under rich text editor

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 010 Cards with image & link

Component name: 010-lp-kit-cards-with-image-link Dev owner: Artur

Notes: You can define the number of cards

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 011 Paragraphs in two columns

Component name: 011-lp-kit-paragraphs-in-2-columns Dev owner: Artur

Notes: You can define the number of paragraphs

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 012 Feature and image - full width

Component name: 012-lp-kit-feature-w-image-full-width Dev owner: Artur

Notes:

Dev

Bug description: I believe colors should be defined by class names too

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 013 Transparent cards with centered content

Component name: 013-lp-kit-transparent-cards-centered Dev owner: Artur

Notes: You can define the number of cards & choose between icons or images

Dev

Bug description: hs_cos_wrapper_type_inline_rich_text ul <- Isn't this class name common in many components in HS? Maybe we should scope it a bit more

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 014 Image with description

Component name: 014-lp-kit-image-with-description Dev owner: Igor

Notes:

👇 This is how it looks 👇

100% LP-KIT Jquery Dependency Spacing adjusted

Component label: [lp-kit] 015 FAQ in two columns

Component name: 015-lp-kit-faq-2-columns Dev owner: Igor

Notes: You can define the number of questions

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 016 Team cards

Component name: 016-lp-kit-team-cards Dev owner: Artur

Notes: You can define the number of cards

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 017 Three cards with icons row

Component name: 017-lp-kit-3-cards-icons-row Dev owner: Artur

Notes: You can customize icon's background color

Dev Design

Bug description: The same thing as above, colors in class names

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 018 Cards with images & text

Component name: 018-lp-kit-cards-with-images-text Dev owner: Artur

Notes: You can define the number of cards

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 019 Two coloured cards with text

Component name: 019-lp-kit-2-coloured-cards-with-text Dev owner: Adrián

Notes:

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 020 Coloured cards with images

Component name: 020-lp-kit-coloured-cards-with-images Dev owner: Artur

Notes: You can define the number of cards

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 021 Centered CTA

Component name: 021-lp-kit-centered-cta Dev owner: Artur

Notes: You can choose between HS CTA or static button

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 022 Centered image

Component name: 022-lp-kit-centered-image Dev owner: Artur

Notes:

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 023 Centered custom video

Component name: 023-lp-kit-centered-custom-video Dev owner: Artur

Notes: You can use place here an embed code from Wistia, Youtube or other video platform

👇 This is how it looks 👇

100% LP-KIT Jquery Dependency Spacing adjusted

Component label: [lp-kit] 024 Animated customer testimonials

Component name: 024-lp-kit-animated-customer-testimonials Dev owner: Artur

Notes: You can hide logos part or opinions part

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 025 Form with background - full width

Component name: 025-lp-kit-form-w-background-full-width Dev owner: Artur

Notes: You can choose between a background color or a background image

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 026 CTA banner with text & buttons

Component name: 026-lp-kit-cta-with-text-and-buttons Dev owner: Artur

Notes:

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 027 Customers story boxes

Component name: 027-lp-kit-customers-story-boxes Dev owner: Artur

Notes:

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 028 Customers story boxes with quotes

Component name: 028-lp-kit-customers-story-boxes-quotes Dev owner: Artur

Notes:

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 029 Customers story video with quotes

Component name: 029-lp-kit-customers-story-video-quotes Dev owner: Artur

Notes:

👇 This is how it looks 👇

Not fully lp-kit compatible Jquery Dependency 🚨 Spacing not adjusted

Component label: [lp-kit] 030 Missing component

Component name: 030-lp-kit-missing-component Dev owner: Igor

Notes: Put this component as a placeholder if desired component is not ready yet

👇 This is how it looks 👇

Missing component!

This means that in this place we will have a component that is in the process of creation. Description: There should be a low level app written in Web-ASM here.
100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 031 Features cards with icons

Component name: 031-lp-kit-features-cards-with-icons Dev owner: Artur

Notes: You can define the number of cards

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 032 Tabs with links

Component name: 032-lp-kit-tabs-with-links Dev owner: Artur

Notes: You can define the number of tabs + the headline

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 033 Header with tabs

Component name: 033-lp-kit-header-with-tabs Dev owner: Artur

Notes: You can define the number of tabs + the headline

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 034 Price card - vertical

Component name: 034-lp-kit-price-card-vertical Dev owner: Artur

Notes: You can define the number of columns, features + add price-changing switches!

Dev

Bug description: Pending refactor JS

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 035 Price card - horizontal

Component name: 035-lp-kit-price-card-horizontal Dev owner: Artur

Notes: You can define the number of features

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 036 Pricing cards with CTA

Component name: 036-lp-kit-pricing-cards-with-cta Dev owner: Artur

Notes: You can define the number of cards + the headline

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 037 Header with form & product details

Component name: 037-lp-kit-header-w-form-product-details Dev owner: Artur

Notes: You can show/hide the top logo, features & testimonial sections here

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 038 Paragraphs in rows

Component name: 038-lp-kit-paragraphs-in-rows Dev owner: Artur

Notes: You can define the number of paragraphs

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 039 Floating CTA

Component name: 039-lp-kit-floating-cta Dev owner: Artur

Notes: This component is visible only on tablet & mobile screen sizes. You can enable/disable & customize it per your wish.

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 040 Custom form full-width

Component name: 040-lp-kit-custom-form-full-width Dev owner: Igor

Notes: You can insert your custom form (outside Hubspot) as an embed code. It supports type=text & type=submit fields

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 041 RichText on the left

Component name: 041-lp-kit-rich-text-on-the-left Dev owner: Igor

Notes: You can edit rich text, but this time it's on the left side!!

👇 This is how it looks 👇

H1 All-in-one management software for medical practices

GDPR & HIPAA compliant to ensure security of all your patients data.

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 043 Simplified footer

Component name: 043-lp-kit-simplified-footer Dev owner: Igor

Notes: You can change locales, add/remove links and google social media icons

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 044 Header with form, text and image

Component name: 044-lp-kit-header-w-form-and-image Dev owner: Artur

Notes: It works the same way as [lp-kit] 003 Header with text and image or video, except it uses HS form instead of CTA buttons

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 047 Banner with testimonial

Component name: 047-lp-kit-banner-testimonials Dev owner: Adrián

Notes: It's a static banner with one single testimonial

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 048 Rich text with whats app button & meeting

Component name: [lp-kit] 048 Rich text with whats app button & meeting Dev owner: Adrián

Notes: It´s rich text with the option of adding whats app button and/or meeting box

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 049 Dynamic image or video with dropdowns button

Component name: 049-lp-kit-dynamic-image-video-with-dropdowns Dev owner: Adrián

Notes: It´s dynamic image/video associated to each dropdown that changes when you click into one of them

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 050 Webinar

Component name: 050-lp-kit-webinar Dev owner: Adrián

Notes: Module to describe an event/webinar

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 051 Gallery videos with dropdowns and links

Component name: 051-gallery-videos-with-dropdown-links Dev owner: Adrián

Notes: It´s image/video associated to module with dropdown that can have a link to other page

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 052 Iframe

Component name: 052-lp-kit-iframe Dev owner: Miguel

Notes: Module to add an iframe

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 053 Companies Card

Component name: 053-lp-kit-companies-card Dev owner: Miguel

Notes: Module to add multiple logos. It's possible show all or show by steps.

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 054 Dynamic Table

Component name: 054-lp-kit-dynamic-table Dev owner: Adrián

Notes: Module to add a table with columns and rows that you can edit for your needs

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 055 Vertical Price Cards

Component name: 055-lp-kit-vertical-price-cards Dev owner: Adrián

Notes: Module to add a table with columns and rows that you can edit for your needs

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 056 Listing Blog

Component name: 056-lp-kit-listing-blog Dev owner: Miguel

Notes: Module to add listing of blog/blogs, not compatible if you are not using blog engine

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 058 Calculator and Graph

Component name: 058-lp-kit-calculator-graph Dev owner: Adrián

Notes: Module to create a calculator with results and chart.js Graph

👇 This is how it looks 👇

100% LP-KIT Vanilla JS Spacing adjusted

Component label: [lp-kit] 059 New Form

Component name: 059-lp-kit-new-form Dev owner: Miguel

Notes: New form component where you can show/hide all the features needed

👇 This is how it looks 👇