30 lines
1.2 KiB
Markdown
30 lines
1.2 KiB
Markdown
|
---
|
||
|
|
type: post
|
||
|
|
slug: cards
|
||
|
|
date: 2016-03-02
|
||
|
|
title: Juju Cards
|
||
|
|
---
|
||
|
|
|
||
|
|
One of the new things that we've been working on over on the Juju UI team is the idea of cards.
|
||
|
|
|
||
|
|
Cards are a simple concept that allows others to see at a glance both what you're offering and a means to test it out. Juju is perfect for this because it's so easy to spin up a local environment and then `juju deploy [x]`!
|
||
|
|
|
||
|
|
Here's an example for a relatively complex bundle:
|
||
|
|
|
||
|
|
<script async src="https://assets.ubuntu.com/v1/juju-cards-v1.0.9.js"></script>
|
||
|
|
<div class="juju-card" data-id="plumgrid-ons"></div>
|
||
|
|
|
||
|
|
These also work for charms:
|
||
|
|
|
||
|
|
<div class="juju-card" data-id="wordpress"></div>
|
||
|
|
|
||
|
|
Of course, they are nicely responsive:
|
||
|
|
|
||
|
|
<div class="juju-card" data-id="openstack-base" style="width:250px;float:left;margin-right:1em"></div>
|
||
|
|
|
||
|
|
<div class="juju-card" data-id="mediawiki" style="width:250px;float:left"></div>
|
||
|
|
|
||
|
|
<br clear="all" />
|
||
|
|
|
||
|
|
Check out how to build cards for your own charms [here](https://jujucharms.com/community/cards)! This is a new technology that we're playing around with, and we're still ironing out features to include and where cards can be embedded, but they're perfect for your product's site.
|