?

HOW TO USE THIS BLOCK

Starter
19$/month
10,000 messages
unlimited data
unlimited users
first 10 day free
Your Current Plan
Professional
39$/month
10,000 messages
unlimited data
unlimited users
first 30 day free
Change to this Plan
NEW
Business
59$/month
10,000 messages
unlimited data
unlimited users
first 100 day free
Change to this Plan

We have a full version of Startup Framework

You will find there all the components and blocks you can use for creating a website.

Watch the Presentation
Startup user manual

Block Price #1

  1. Overview

    These type of blocks are created specifically for displaying prices for your products. All of these blocks are based on a grid and have been designed to show the prices for your products in a convenient way.

  2. Installation

    If you haven't already done all the instructions from the how to install page of this documentation, please do that first.

  3. CSS version:

    To use this block, copy and paste the following line of code into your HTML file:

    Starter
    19$/month
    10,000 messages
    unlimited data
    unlimited users
    first 10 day free
    Your Current Plan
    Professional
    39$/month
    10,000 messages
    unlimited data
    unlimited users
    first 30 day free
    Change to this Plan
    NEW
    Business
    59$/month
    10,000 messages
    unlimited data
    unlimited users
    first 100 day free
    Change to this Plan
  4. LESS version:

    Copy the same code as in css version and paste it in your '.less' file. Put the following line after that code:

    @import '../../ui-kit/ui-kit-price/less/price-1.less';
  5. Component Modification:

    In this section you will see what modifications you can do to the block.

    This block has three columns with product headers, descriptions and an action button. Any of these columns can have a special marker for notifying the user about the product being new. Any content in these columns is customizable, but you should follow the HTML structure.

    If you want use the "NEW" marker functionality you need to add <div class="ribbon">NEW</div> before the closing tag of the product title <div class="title">Title</div> . You can replace the word "NEW" with another word.

    Each product has a button. You need to implement your own functionality for this button. All buttons have two states - normal and disabled. To make a button disabled add the class="disabled" to the button.

  6. Samples

    We have created examples for you to see how this block looks along with other content.


    You can see it in next samples:
    sample # 3
    sample # 9
    sample # 17