加入购物车 联系卡
联系我们！我们全天候在线。
IM体育组件
基本示例
- 写信给我们[email protected]
- 写信给我们[email protected]
<!-- Contacts card: Border -->
<div class="card">
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="d-flex pb-3 border-bottom">
<i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Find us</span>
<a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="d-flex pt-2 pb-3 border-bottom">
<i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Call us</span>
<a href="tel:" class="d-block text-heading fs-sm"></a>
</div>
</li>
<li class="d-flex pt-2m">
<i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Write us</span>
<a href="mailto:[email protected]" class="d-block text-heading fs-sm">[email protected]</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Contacts card: Shadow -->
<div class="card border-0 shadow">
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="d-flex pb-3 border-bottom">
<i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Find us</span>
<a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="d-flex pt-2 pb-3 border-bottom">
<i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Call us</span>
<a href="tel:" class="d-block text-heading fs-sm"></a>
</div>
</li>
<li class="d-flex pt-2m">
<i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Write us</span>
<a href="mailto:[email protected]" class="d-block text-heading fs-sm">[email protected]</a>
</div>
</li>
</ul>
</div>
</div>// Contacts card: Border
.card
.card-body
ul.list-unstyled.mb-0
li.d-flex.pb-3.border-bottom
i.ci-location.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Find us
a(href="#").d-block.text-heading.fs-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
li.d-flex.pt-2.pb-3.border-bottom
i.ci-phone.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Call us
a(href="tel:").d-block.text-heading.fs-sm
|
li.d-flex.pt-2
i.ci-mail.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Write us
a(href="mailto:[email protected]").d-block.text-heading.fs-sm
| [email protected]
// Contacts card: Shadow
.card.border-0.shadow
.card-body
ul.list-unstyled.mb-0
li.d-flex.pb-3.border-bottom
i.ci-location.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Find us
a(href="#").d-block.text-heading.fs-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
li.d-flex.pt-2.pb-3.border-bottom
i.ci-phone.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Call us
a(href="tel:").d-block.text-heading.fs-sm
|
li.d-flex.pt-2
i.ci-mail.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Write us
a(href="mailto:[email protected]").d-block.text-heading.fs-sm
| [email protected]
替代布局
主商店地址
点击查看地图<!-- Contacts card: Border -->
<div class="card">
<div class="card-body text-center">
<i class="ci-location h3 mt-2 mb-4 text-primary"></i>
<h3 class="h6 mb-2">Main store address</h3>
<p class="fs-sm text-muted">396 Lillian Blvd, Holbrook, NY 11741, USA</p>
<a class="fs-sm" href="#">
Click to see map
<i class="ci-arrow-right align-middle ms-1"></i>
</a>
</div>
</div>
<!-- Contacts card: Shadow -->
<div class="card border-0 shadow">
<div class="card-body text-center">
<i class="ci-phone h3 mt-2 mb-4 text-primary"></i>
<h3 class="h6 mb-3">Phone numbers</h3>
<ul class="list-unstyled fs-sm mb-0">
<li>
<span class="text-muted me-1">Customer service:</span>
<a class="nav-link-style" href="tel:"></a>
</li>
<li>
<span class="text-muted me-1">Tech support:</span>
<a class="nav-link-style" href="tel:"></a>
</li>
</ul>
</div>
</div>// Contacts card: Border
.card
.card-body.text-center
i.ci-location.h3.mt-2.mb-4.text-primary
h3.h6.mb-2 Main store address
p.fs-sm.text-muted 396 Lillian Blvd, Holbrook, NY 11741, USA
a(href="#").fs-sm
| Click to see map
i.ci-arrow-right.align-middle.ms-1
// Contacts card: Shadow
.card.border-0.shadow
.card-body.text-center
i.ci-phone.h3.mt-2.mb-4.text-primary
h3.h6.mb-3 Phone numbers
ul.list-unstyled.fs-sm.mb-0
li
span.text-muted.me-1 Customer service:
a.nav-link-style(href="tel:")
li
span.text-muted.me-1 Tech support:
a.nav-link-style(href="tel:")
带图片
芝加哥，美国
- 写信给我们[email protected]
纽约，美国
- 写信给我们[email protected]
<!-- Contacts card: Border -->
<div class="card">
<img src="path-to-image" class="card-img-top" alt="Chicago">
<div class="card-body">
<h6>Chicago, USA</h6>
<ul class="list-unstyled mb-0">
<li class="media pb-3 border-bottom">
<i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Find us</span>
<a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="d-flex pt-2 pb-3 border-bottom">
<i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Call us</span>
<a href="tel:" class="d-block text-heading fs-sm"></a>
</div>
</li>
<li class="d-flex pt-2m">
<i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Write us</span>
<a href="mailto:[email protected]" class="d-block text-heading fs-sm">[email protected]</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Contacts card: Shadow -->
<div class="card border-0 shadow">
<img src="path-to-image" class="card-img-top" alt="Chicago">
<div class="card-body">
<h6>New York, USA</h6>
<ul class="list-unstyled mb-0">
<li class="d-flex pb-3 border-bottom">
<i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Find us</span>
<a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="d-flex pt-2 pb-3 border-bottom">
<i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Call us</span>
<a href="tel:" class="d-block text-heading fs-sm"></a>
</div>
</li>
<li class="d-flex pt-2m">
<i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Write us</span>
<a href="newyork:[email protected]" class="d-block text-heading fs-sm">[email protected]</a>
</div>
</li>
</ul>
</div>
</div>// Contacts card: Border
.card
img(src="path-to-image", alt="Chicago").card-img-top
.card-body
h6 Chicago, USA
ul.list-unstyled.mb-0
li.d-flex.pb-3.border-bottom
i.ci-location.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Find us
a(href="#").d-block.text-heading.fs-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
li.d-flex.pt-2.pb-3.border-bottom
i.ci-phone.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Call us
a(href="tel:").d-block.text-heading.fs-sm
|
li.d-flex.pt-2
i.ci-mail.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Write us
a(href="mailto:[email protected]").d-block.text-heading.fs-sm
| [email protected]
// Contacts card: Shadow
.card.border-0.shadow
img(src="path-to-image", alt="New York").card-img-top
.card-body
h6 New York, USA
ul.list-unstyled.mb-0
li.d-flex.pb-3.border-bottom
i.ci-location.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Find us
a(href="#").d-block.text-heading.fs-sm
| 396 Lillian Blvd, Holbrook, NY 11741, USA
li.d-flex.pt-2.pb-3.border-bottom
i.ci-phone.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Call us
a(href="tel:").d-block.text-heading.fs-sm
|
li.d-flex.pt-2
i.ci-mail.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Write us
a(href="mailto:[email protected]").d-block.text-heading.fs-sm
| [email protected]
带地图
芝加哥，美国
- 写信给我们[email protected]
纽约，美国
- 写信给我们[email protected]
<!-- Contacts card: Border -->
<div class="card">
<div class="card-img-top overflow-hidden">
<!-- Google map embed iframe goes here -->
</div>
<div class="card-body">
<h6>Chicago, USA</h6>
<ul class="list-unstyled mb-0">
<li class="d-flex pb-3 border-bottom">
<i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Find us</span>
<a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="d-flex pt-2 pb-3 border-bottom">
<i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Call us</span>
<a href="tel:" class="d-block text-heading fs-sm"></a>
</div>
</li>
<li class="d-flex pt-2m">
<i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Write us</span>
<a href="mailto:[email protected]" class="d-block text-heading fs-sm">[email protected]</a>
</div>
</li>
</ul>
</div>
</div>
<!-- Contacts card: Shadow -->
<div class="card border-0 shadow">
<div class="card-img-top overflow-hidden">
<!-- Google map embed iframe goes here -->
</div>
<div class="card-body">
<h6>New York, USA</h6>
<ul class="list-unstyled mb-0">
<li class="d-flex pb-3 border-bottom">
<i class="ci-location fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Find us</span>
<a href="#" class="d-block text-heading fs-sm">769, Industrial Dr, West Chicago, IL 60185, USA</a>
</div>
</li>
<li class="d-flex pt-2 pb-3 border-bottom">
<i class="ci-phone fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Call us</span>
<a href="tel:" class="d-block text-heading fs-sm"></a>
</div>
</li>
<li class="d-flex pt-2m">
<i class="ci-mail fs-lg mt-2 mb-0 text-primary"></i>
<div class="ps-3">
<span class="fs-ms text-muted">Write us</span>
<a href="newyork:[email protected]" class="d-block text-heading fs-sm">[email protected]</a>
</div>
</li>
</ul>
</div>
</div>// Contacts card: Border
.card
.card-img-top.overflow-hidden
// Google map embed iframe goes here
.card-body
h6 Chicago, USA
ul.list-unstyled.mb-0
li.d-flex.pb-3.border-bottom
i.ci-location.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Find us
a(href="#").d-block.text-heading.fs-sm
| 769, Industrial Dr, West Chicago, IL 60185, USA
li.d-flex.pt-2.pb-3.border-bottom
i.ci-phone.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Call us
a(href="tel:").d-block.text-heading.fs-sm
|
li.d-flex.pt-2
i.ci-mail.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Write us
a(href="mailto:[email protected]").d-block.text-heading.fs-sm
| [email protected]
// Contacts card: Shadow
.card.border-0.shadow
.card-img-top.overflow-hidden
// Google map embed iframe goes here
.card-body
h6 New York, USA
ul.list-unstyled.mb-0
li.d-flex.pb-3.border-bottom
i.ci-location.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Find us
a(href="#").d-block.text-heading.fs-sm
| 396 Lillian Blvd, Holbrook, NY 11741, USA
li.d-flex.pt-2.pb-3.border-bottom
i.ci-phone.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Call us
a(href="tel:").d-block.text-heading.fs-sm
|
li.d-flex.pt-2
i.ci-mail.fs-lg.mt-2.mb-0.text-primary
.ps-3
span.fs-ms.text-muted Write us
a(href="mailto:[email protected]").d-block.text-heading.fs-sm
| [email protected]