Custom content from product team
Shopping
Check with your designers to help you design this section
-
Item 1 $5 -
Item 2 $10
Cart:
Check with your designers to help you design this section
-
Item 1 $5 -
Item 2 $10
Basic Info Card
These are cards
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu
<div class="raul-card">
<h2>These are cards</h2>
<p class="raul-card-description mb-0">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec qu
</p>
</div>
Full Info Card
This is the title
This is the description
<div class="raul-card p-3">
<div class="row align-items-center">
<div class="col-12 col-lg-3 mb-3 mb-lg-0">
<div class="row no-gutters">
<div class="col-auto">
<img
style="width: 48px; height: 48px;"
class="img-fluid"
src="https://cdn.realpage.com/images/a0.jpg"
alt="a0"
>
</div>
<div class="col pl-3">
<h3>This is the title</h3>
<p class="text-charcoal-50 mb-0">This is the description</p>
</div>
</div>
</div>
<div class="col-12 col-lg-2 mb-3 mb-lg-0">
<span class="text-charcoal-70 mb-0">
<span class="d-inline-block">710 Peachtree Street NE,</span>
<span class="d-inline-block">
<span>Suite 100</span>
<span>Atlanta, </span>
</span>
<span class="d-inline-block">
<span>GA </span>
<span>30308, </span>
</span>
<span class="d-inline-block">USA</span>
</span>
</div>
<div class="col-12 col-lg mb-3 mb-lg-0 text-truncate">
<a href="tel:4044596100" class="text-charcoal-80 d-block text-truncate">
<i class="fa fa-phone text-charcoal-70 pr-2" aria-hidden="true"></i>
(404) 459-6100
</a>
</div>
<div class="col-12 col-lg mb-3 mb-lg-0 text-truncate">
<a href="mailto:info@raul.com" class="text-charcoal-80 d-block text-truncate">
<i class="fa fa-envelope-o text-charcoal-70 pr-2" aria-hidden="true"></i>
info@raul.com
</a>
</div>
<div class="col-12 col-lg text-truncate">
<a href="http://cfres.com" target="_blank" class="text-charcoal-80 d-block text-truncate">
<i class="fa fa-globe text-charcoal-70 pr-2" aria-hidden="true"></i>
cfres.com
</a>
</div>
</div>
</div>
Simple Card
The following card shows the most basic usage by just adding the tag. You can add whatever you need inside the tag.
<ui-card></ui-card>
Basic Info Card
The following is an example of using the card with your own markup inside.
This is the title
This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu
<ui-card>
<h2>This is the title</h2>
<p class="raul-card-description mb-0">
This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec qu
</p>
</ui-card>
Full Info Card
The following is an example of all available options for this component.
<ui-info-card
image-src="https://cdn.realpage.com/images/a0.jpg"
card-title="This is the title"
card-description="This is the description"
address="710 Peachtree Street NE"
suite="Suite 100"
city="Atlanta"
state="GA"
zip="30308"
country="USA"
phone="(404) 459-6100"
email="info@raul.com"
website="http://cfres.com"
>
</ui-info-card>
Options List
| Attribute | Value Type | Default Value | Description |
|---|---|---|---|
image-src
|
String
|
None |
Sets the src attribute for the image
|
card-title
|
String
|
None | Sets the title text |
card-description
|
String
|
None | Sets the description text |
address
|
String
|
None | Sets the address text |
suite
|
String
|
None | Sets the suite text |
city
|
String
|
None | Sets the city text |
state
|
String
|
None | Sets the state text |
zip
|
Number
|
None | Sets the zip text |
country
|
String
|
None | Sets the country text |
phone
|
String
|
None |
Sets the phone text and href attribute
|
email
|
String
|
None |
Sets the email text and href attribute
|
website
|
String
|
None |
Sets the website text and href attribute
|