Overview
The app card component is the main way to display an app product, including its price and logo. They can be used to show different apps.
Examples
Default variation
From
$
7
.50
/mo
+GST
Other fees or conditions
Card heading
This is some content which relates to the card. This is some content which relates to the card.
Certified
<div class="card card--vertical card--center card--text-left card--link">
<div class="card__container">
<div class="card__logo">
<img alt="placeholder" src="http://placehold.it/300x200" class="card__img" >
</div>
<div class="card__price">
<div class="price price--left fg-grey-800">
<div class="fg-grey-500 x-small">From</div>
<span class="price__currency">$</span>
<span class="price__amount">7</span>
<div class="price__suffix text-left">
<div class="price__decimal">.50</div>
<div class="price__frequency">/mo</div>
<div class="price__info">+GST</div>
</div>
<div class="fg-grey-500 x-small">Other fees or conditions</div>
</div>
</div>
</div>
<div class="card__content">
<div class="card__head">
<a href="" class="pill pill--info">Billing & invoicing</a><a href="" class="pill pill--info">Banking</a><a href="" class="pill pill--info">Human resources</a><a href="" class="pill pill--info">Info</a>
</div>
<div class="card__body">
<a href="" class="card__full-link"><h4 class="fg-grey-800">Card heading</h4></a>
<p class="fg-grey-700">This is some content which relates to the card. This is some content which relates to the card.</p>
<div class="flex items--center">
<svg role="img" class="icon icon-success icon--xs icon--fg-success">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#success"></use>
</svg>
<span class="ml-min x-small fg-grey-800">Certified</span>
</div>
</div>
</div>
</div>Usage guidelines
| Dos | Don'ts |
|---|---|
 Only use the 'App Card' for displaying an 3rd party app.
|
 Don't use to display an MYOB product. Instead, use the 'Product Card'.
|
|
Only use the image area to display the 3rd party app developer's logo or chosen image.
|
Don't mix and match orientation, alignment or colour in one viewable area.
|
Implementation guidelines
We're so sorry, there are currently no implementation guidelines for this component 😥
If you feel you can help out your fellow designers by creating implementation guidelines for this component, please reach out to @marquee on the #astridd Slack channel.