By John EganQuidget Tokens Test
By John EganSAMPLE: Dummy Quidget Widget card markup
Wrap each card (1+) in div#quidget.
<div class="quidget-card" data-pick="true">
<div class="quidget-head">
<div class="logo"></div>
<div class="action-link"></div>
<div class="action-text">on [COMPANY]'s website</div>
</div>
<div class="quidget-overview">
<h3>Overview</h3>
<div class="overview-content"></div>
</div>
<div class="quidget-details">
<div class="details-item">
<p class="category">APY<span class="disc-info-icon"></span></p>
<p class="value"></p>
</div>
<div class="details-item">
<p class="category">Min. deposit</p>
<p class="value"></p>
</div>
<div class="details-item">
<p class="category">Monthly fee</p>
<p class="value"></p>
</div>
</div>
<div class="quidget-pick">
<h3>Why we picked it</h3>
<div class="pick-content">
<p>Lorem ipsum dolor sit amet consectetur. Tincidunt proin purus sed fusce rhoncus. Pellentesque scelerisque pharetra mi elementum tempor. Eget scelerisque eleifend enim ipsum. Lorem iaculis leo ornare in diam neque. Auctor ultrices amet elementum ac purus eget. </p>
</div>
</div>
<div class="blog-accordion">
<div class="blog-accordion-element">
<h3>Pros and cons</h3>
<div class="blog-accordion-panel">
This is using the Blog Accordion component.
</div>
</div>
</div>
</div>
SAMPLE: Populated Quidget Widget with 3 offers
Overall pick
Best for joint checking and savings
Overview
highlight_textAPY | apy |
|---|---|
Min. deposit | min_deposit |
Monthly fee | monthly_fee |
Why we picked it
Lorem ipsum dolor sit amet consectetur. Tincidunt proin purus sed fusce rhoncus. Pellentesque scelerisque pharetra mi elementum tempor. Eget scelerisque eleifend enim ipsum. Lorem iaculis leo ornare in diam neque. Auctor ultrices amet elementum ac purus eget.
Best for joint checking and savings
Overview
highlight_textAPY | apy |
|---|---|
Min. deposit | min_deposit |
Monthly fee | monthly_fee |
Why we picked it
Lorem ipsum dolor sit amet consectetur. Tincidunt proin purus sed fusce rhoncus. Pellentesque scelerisque pharetra mi elementum tempor. Eget scelerisque eleifend enim ipsum. Lorem iaculis leo ornare in diam neque. Auctor ultrices amet elementum ac purus eget.
Best for joint checking and savings
Overview
highlight_textAPY | apy |
|---|---|
Min. deposit | min_deposit |
Monthly fee | monthly_fee |
Why we picked it
Lorem ipsum dolor sit amet consectetur. Tincidunt proin purus sed fusce rhoncus. Pellentesque scelerisque pharetra mi elementum tempor. Eget scelerisque eleifend enim ipsum. Lorem iaculis leo ornare in diam neque. Auctor ultrices amet elementum ac purus eget.
SAMPLE: Individual Tokens (only load because div#quidget is present on this page for performance)
title
| APY | apy |
| MinBalanceToEarnAPY | min_balance_for_apy |
| MinDepositToEarnAPY | min_deposit |
| MonthlyFees | monthly_fee |
| as "as of.." date | rates_last_updated |
| BankAccountName | title |
| Disclaimer | disclaimer |
| HighlightText | highlight_text |
| InsuredMemberInfo | insured_member_info |
| Marketing Bullets | description |
| Product Disclosure | disclosure |
| PromoText | promo_text |
| AdvImpPixel |
|
| LogoImageUrl |
|
| Bank Name | displayname |
| Button | Apply Now |
| Logo |
|
title
| APY | apy |
| MinBalanceToEarnAPY | min_balance_for_apy |
| MinDepositToEarnAPY | min_deposit |
| MonthlyFees | monthly_fee |
| as "as of.." date | rates_last_updated |
| BankAccountName | title |
| Disclaimer | disclaimer |
| HighlightText | highlight_text |
| InsuredMemberInfo | insured_member_info |
| Marketing Bullets | description |
| Product Disclosure | disclosure |
| PromoText | promo_text |
| AdvImpPixel |
|
| LogoImageUrl |
|
| Bank Name | displayname |
| Button | Apply Now |
| Logo |
|
What’s on your credit report?
Stay up to date with your latest credit information—and get your FICO® Score for free.
Get your free reportNo credit card required
About the author
John Egan
John Egan is a freelance writer, editor and content marketing strategist in Austin, Texas. His work has been published by outlets such as CreditCards.com, Bankrate, Credit Karma, LendingTree, PolicyGenius, HuffPost, National Real Estate Investor and Urban Land.
Read more from John