Embedding Public Trello Cards/Boards

HTML

<!--

This stuff is still *experimental*, but I'm giving some examples so people can mess
around with it and give us some feedback :)

The images/html are cached, so it may take some time for changes to the boards/cards to show up, but the output shouldn't ever be more than 10 minutes out of date.

- Daniel LeCheminant (@d_lec)

-->

<h1>Embedding Public Trello Boards</h1>

<p>Start with a <b>public</b> board, at a URL like this:</p>

<p><tt>https://trello.com/b/nC8QJJoZ/trello-development</tt></p>

<p>Chop off the last <tt>/</tt> and everything after it to get this:</p>

<p><tt>https://trello.com/b/nC8QJJoZ</tt></p>


<p>If you tack on a <tt>.html</tt> (i.e. <tt>https://trello.com/b/nC8QJJoZ.html</tt>), you get something that can be used as the <tt>src</tt> for an <tt>iframe</tt> tag, like this:</p>

<bg>
<iframe src="https://trello.com/b/nC8QJJoZ.html" frameBorder="0" width="100%" height="600"></iframe>
</bg>

<p>If you tack on a <tt>.js</tt> (i.e. <tt>https://trello.com/b/nC8QJJoZ.js</tt>), you get something that can be used as the <tt>src</tt> for a <tt>script</tt> tag, like this:</p>

<script src="https://trello.com/b/nC8QJJoZ.js"></script>

<p>If you wanted to make a link to your board from github (or something else that accepts markdown), you could use something like this:</p>

<code>
[![Our Trello Board](https://trello.com/b/nC8QJJoZ.png)](https://trello.com/b/nC8QJJoZ)
</code>

<h1>Embedding Public Trello Cards</h1>

<p>Start with a card on a <b>public</b> board, at a URL like this:</p>

<p><tt>https://trello.com/c/OKVduwHL/1096-markdown-in-card-comments</tt></p>

<p>Chop off the last <tt>/</tt> and everything after it to get this:</p>

<p><tt>https://trello.com/c/OKVduwHL</tt></p>

<p>If you tack on a <tt>.png</tt> (i.e. <tt>https://trello.com/c/OKVduwHL.png</tt>), you get something that an be used as the <tt>src</tt> for an <tt>img</tt> tag, like this:</p>

<p><img src="https://trello.com/c/OKVduwHL.png" /></p>

<p>If you tack on a <tt>.html</tt> (i.e....

CSS

p, h1 { font-family: arial }




bg
{
.trello-embed a {
    font: 100px "Helvetica Neue", Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 18px;
    color: #64b448;  
}