Lapus | 多用途HTML模板+网页构建器
通过电子邮箱注册
已经拥有账号？ 登录

Pricing Options

These modular elements can be readily used and customized across pages and in different blocks.

Explore all of Lapus's modular elements
at the Element Index Page →

Basic List

A simple option useful as part of a multi-plan price offering. Use the class .boxed--emphasis in conjunction with a label to emphasise the most valued price option. 

<div class="pricing pricing-1 boxed boxed--lg boxed--border">
	<h3>Title</h3>
	<span class="h2"><strong>$4.99</strong></span>
	<span class="type--fine-print">Per Month, AUD Inlc GST.</span>
	<hr>
	<ul>
		<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
		<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
		<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
		<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
	</ul>
	<a class="btn btn--primary" href="#">
		<span class="btn__text">
			Button Text
		</span>
	</a>
</div><!--end of pricing-->

Basic

$4.99 Per Month, AUD Inlc GST.
  • 24/7 电话支持
  • 无限流量
  • 支持CSV数据导入
  • 自动切换
采购计划

Basic Text

A simple option useful as part of a basic price offering. Use the class .boxed--emphasis in conjunction with a label to emphasise the most valued price option. 

<div class="pricing pricing-1 boxed boxed--border boxed--lg boxed--emphasis text-center">
	<h4>Title</h4>
	<span class="h1"><span class="pricing__dollar">$</span>79</span>
	<p>
		Description
	</p>
	<a class="btn btn--primary-1" href="#">
		<span class="btn__text">
			Button Text
		</span>
	</a>
</div><!--end pricing-->

基础版

￥79

常规许可证允许您使用平台自定义，存储甚至托管网站

推荐 马上下单

Basic Image

A simple option useful as part of a basic price offering. Use the class .boxed--emphasis in conjunction with a label to emphasise the most valued price option. 

<div class="pricing pricing-1 boxed boxed--border boxed--lg boxed--emphasis text-center">
	<h4>Title</h4>
	<span class="h1"><span class="pricing__dollar">$</span>79</span>
	<img alt="Image" src="img/image.png" />
	<p>
		Description
	</p>
	<a class="btn btn--primary-1" href="#">
		<span class="btn__text">
			Button Text
		</span>
	</a>
</div><!--end pricing-->

Designer

￥79 Image

常规许可证允许您使用平台自定义，存储甚至托管网站

推荐 马上下单

Wide List

A wider option suitable as part of a single or double-plan offering. Use a label to emphasise the most valued pricing option. 

<div class="pricing pricing-2 boxed boxed--border boxed--lg row">
	<div class="col-lg-6 text-center">
		<h5>Title</h5>
		<span class="h1"><span class="pricing__dollar">$</span>50</span>
		<p class="type--fine-print">Per Month, AUD.</p>
		<a class="btn btn--primary" href="#">
			<span class="btn__text">Button Text</span>
		</a>
	</div>
	<div class="col-lg-6">
		<ul>
			<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
			<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
			<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
			<li><span class="checkmark bg--primary-1"></span><span>Perk</span></li>
		</ul>
	</div>
</div><!--end of pricing-->
推荐
Medium User
￥50

每月, RMB.

采购计划
  • 24/7 电话支持
  • 无限流量
  • 支持CSV数据导入
  • 自动切换
  • 100GB Storage

Minimal List

A minimally styled option ideal for use as part of 3 - 4 part plan offerings. Use a background class such as .bg--primary on the .pricing__head element to emphasise the most valued plan. 

<div class="pricing pricing-3 text-center">
	<div class="pricing__head bg--secondary boxed">
		<h5>Title</h5>
		<span class="h1"><span class="pricing__dollar">$</span>19</span>
		<p class="type--fine-print">Per Month, AUD.</p>
	</div>
	<ul>
		<li><span>Perk</span></li>
		<li><span>Perk</span></li>
		<li><span>Perk</span></li>
		<li><span>Perk</span></li>
	</ul>
</div><!--end pricing-->
基础
￥199

每月, RMB.

  • Anywhere Access
  • 4GB Online Storage
  • Import User Data
  • 自动切换
  • 24/7 Support

Looking for styled pricing sections?

View Pricing Sections

or try the live builder ↗