zk_html/diary/2016-03-02-cards.html

<!doctype html>
<html>
    <head>
        <title>Zk | 2016-03-02-cards</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gentium+Plus&family=Lato&family=Ubuntu+Monodisplay=swap" />
        <link rel="stylesheet" type="text/css" href="/style.css?2024-05-04" />
        <meta name="viewport" content="width=device-width" />
        <meta charset="utf-8" />
    </head>
    <body>
        <main>
            <header>
                <h1>Zk | 2016-03-02-cards</h1>
            </header>
            <article class="content">
                <hr />
<p>type: post
slug: cards
date: 2016-03-02
title: Juju Cards</p>
<hr />
<p>One of the new things that we&rsquo;ve been working on over on the Juju UI team is the idea of cards.</p>
<p>Cards are a simple concept that allows others to see at a glance both what you&rsquo;re offering and a means to test it out.  Juju is perfect for this because it&rsquo;s so easy to spin up a local environment and then <code>juju deploy [x]</code>!</p>
<p>Here&rsquo;s an example for a relatively complex bundle:</p>
<script async src="https://assets.ubuntu.com/v1/juju-cards-v1.0.9.js"></script>
<div class="juju-card" data-id="plumgrid-ons"></div>

<p>These also work for charms:</p>
<div class="juju-card" data-id="wordpress"></div>

<p>Of course, they are nicely responsive:</p>
<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>

<p><br clear="all" /></p>
<p>Check out how to build cards for your own charms <a href="https://jujucharms.com/community/cards">here</a>!  This is a new technology that we&rsquo;re playing around with, and we&rsquo;re still ironing out features to include and where cards can be embedded, but they&rsquo;re perfect for your product&rsquo;s site.</p>
            </article>
            <footer>
                <p>Page generated on 2024-05-04</p>
            </footer>
        </main>
        <script type="text/javascript">
        document.querySelectorAll('.tag').forEach(tag => {
            let text = tag.innerText;
            tag.innerText = '';
            tag.innerHTML = `<a href="/tags.html#${text}">${text}</a>`;
        });
        </script>
    </body>
</html>
update from sparkleup 2020-04-25 05:00:08 +00:00			`<!doctype html>`
			`<html>`
			`<head>`
			`<title>Zk \| 2016-03-02-cards</title>`
update from sparkleup 2023-05-11 05:35:08 +00:00			`<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gentium+Plus&family=Lato&family=Ubuntu+Monodisplay=swap" />`
update from sparkleup 2024-05-05 04:25:08 +00:00			`<link rel="stylesheet" type="text/css" href="/style.css?2024-05-04" />`
update from sparkleup 2020-04-25 05:00:08 +00:00			`<meta name="viewport" content="width=device-width" />`
			`<meta charset="utf-8" />`
			`</head>`
			`<body>`
			`<main>`
			`<header>`
			`<h1>Zk \| 2016-03-02-cards</h1>`
			`</header>`
			`<article class="content">`
			`<hr />`
			`<p>type: post`
			`slug: cards`
			`date: 2016-03-02`
			`title: Juju Cards</p>`
			`<hr />`
update from sparkleup 2020-06-24 07:10:07 +00:00			`<p>One of the new things that we’ve been working on over on the Juju UI team is the idea of cards.</p>`
			`<p>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 <code>juju deploy [x]</code>!</p>`
			`<p>Here’s an example for a relatively complex bundle:</p>`
update from sparkleup 2020-04-25 05:00:08 +00:00			`<script async src="https://assets.ubuntu.com/v1/juju-cards-v1.0.9.js"></script>`
			`<div class="juju-card" data-id="plumgrid-ons"></div>`

			`<p>These also work for charms:</p>`
			`<div class="juju-card" data-id="wordpress"></div>`

			`<p>Of course, they are nicely responsive:</p>`
			`<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>`

			`<p><br clear="all" /></p>`
update from sparkleup 2020-06-24 07:10:07 +00:00			`<p>Check out how to build cards for your own charms <a href="https://jujucharms.com/community/cards">here</a>! 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.</p>`
update from sparkleup 2020-04-25 05:00:08 +00:00			`</article>`
			`<footer>`
update from sparkleup 2024-05-05 04:25:08 +00:00			`<p>Page generated on 2024-05-04</p>`
update from sparkleup 2020-04-25 05:00:08 +00:00			`</footer>`
			`</main>`
update from sparkleup 2020-06-24 07:10:07 +00:00			`<script type="text/javascript">`
			`document.querySelectorAll('.tag').forEach(tag => {`
			`let text = tag.innerText;`
			`tag.innerText = '';`
			tag.innerHTML = `<a href="/tags.html#${text}">${text}</a>`;
			`});`
			`</script>`
update from sparkleup 2020-04-25 05:00:08 +00:00			`</body>`
			`</html>`