Skip to content

Instantly share code, notes, and snippets.

@msund
Created April 25, 2016 18:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save msund/48462c09e02eb03e13f5916259dc75ee to your computer and use it in GitHub Desktop.
Save msund/48462c09e02eb03e13f5916259dc75ee to your computer and use it in GitHub Desktop.
Petition card HTML for embeddable widgets
<div class="box box-basic mvn pan embedded-card">
<div class="arrange arrange-middle mvs phm">
<div class="arrange-fit">
<div style="width:34px;">
<div class="flex-embed box box-basic pan mvn">
<div class="flex-embed-ratio"></div>
<div class="flex-embed-content">
<img src="./embedded-petition_files/jZrzAduviWUWJUK-128x128-noPad.jpg">
</div>
</div>
</div>
</div>
<div class="arrange-fill type-s pls">
<span>Petition by Mercy Corps <span class="type-weak">with 27,767 supporters</span></span>
</div>
</div>
<div class="flex-embed mvs">
<div class="flex-embed-ratio flex-embed-16x9"></div>
<div class="flex-embed-content">
<img src="./embedded-petition_files/VUqtKgyhLsBogeC-800x450-noPad.jpg" alt="Please stop the imminent execution of Ivan Teleguz, an innocent man">
</div>
</div>
<p class="type-s type-weak mts mbxxxs phm">To the U.S. House of Representatives and U.S. Senate</p>
<div class="mbxl phm">
<h4 class="mtn">
Increase the funding for International Disaster Assistance
</h4>
<div class="hide-overflow type-s">
<p style="height: 4.5em">
It's that time of year again: when Congress begins to decide what
programs to fund &mdash; and what programs to cut. On the chopping block is
International Disaster Assistance and Migration and Refugee Assistance
funding &mdash; which includes lifesaving emergency aid for Syrians and the
millions of other families who will experience a humanitarian crisis
this year. President Obama's proposed budget woefully underfunds
humanitarian aid programs: for example, he is recommending cutting
International Disaster Assistance funding by 30 percent from current
levels. Now Congress has the opportunity to fix this.
</p>
</div>
</div>
<div class="mvm phm">
<button class="btn btn-action">Read more</button>
<div class="txt-r mtxs">
<span class="symbol symbol-wordmark symbol-compact symbol-l type-branded"></span>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment