Go to rebrand

Rich content

Accordion

This is a simple Accordion. To include this interactive list, you just need to use the following code snippet:

FAQ Section
Question 1
Text
Text
Text
Text
Text
<section class="ca-acc" data-aria-accordion> <header class="ca-acc__ttl ca-h3">FAQ Section</header> <dl> <dt data-expand-collapse='{"keepText":"true", "target": [".faq-question-1"]}' data-expand-collapse-action="collapse" id="accordion-header-1" aria-expanded="true" aria-controls="accordion-panel-1"> Question 1 </dt> <dd class="faq-question-1 js-expanded" id="accordion-panel-1" aria-labelledby="accordion-header-1"> Text </dd> <dt data-expand-collapse='{"keepText":"true", "target": [".faq-question-2"]}' id="accordion-header-2" aria-expanded="false" aria-controls="accordion-panel-2"> Question 2 </dt> <dd class="faq-question-2 js-collapsed" aria-labelledby="accordion-header-2" id="accordion-panel-2"> Text </dd> <dt data-expand-collapse='{"keepText":"true", "target": [".faq-question-3"]}' id="accordion-header-3" aria-expanded="false" aria-controls="accordion-panel-3"> Question 3 </dt> <dd class="faq-question-3 js-collapsed" aria-labelledby="accordion-header-3" id="accordion-panel-3"> Text </dd> <dt data-expand-collapse='{"keepText":"true", "target": [".faq-question-4"]}' id="accordion-header-4" aria-expanded="false" aria-controls="accordion-panel-4"> Question 4 </dt> <dd class="faq-question-4 js-collapsed" aria-labelledby="accordion-header-4" id="accordion-panel-4"> Text </dd> <dt data-expand-collapse='{"keepText":"true", "target": [".faq-question-5"]}' id="accordion-header-5" aria-expanded="false" aria-controls="accordion-panel-5"> Question 5 </dt> <dd class="faq-question-5 js-collapsed" aria-labelledby="accordion-header-5" id="accordion-panel-5"> Text </dd> </dl> </section>

Accordion + FAQPage Schema

Properly marked up FAQ pages may be eligible to have a rich result on Search and Markup Action for the Google Assistant, which can help your site reach the right users.

Here's an example of an FAQPage Schema markup:

<section class="ca-acc"> <header class="ca-acc__ttl ca-h3">FAQ Section</header> <dl> <dt data-expand-collapse='{"keepText":"true", "target": [".faq-question-1"]}' data-expand-collapse-action="collapse"> Question 1 </dt> <dd class="faq-question-1 js-expanded"><p>Answer 1</p></dd> <dt data-expand-collapse='{"keepText":"true", "target": [".faq-question-2"]}'> Question 2 </dt> <dd class="faq-question-2 js-collapsed"><p>Answer 2</p></dd> </dl> </section> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "FAQPage", "mainentity": [ { "@type": "Question", "name": "Question 1", "acceptedAnswer": { "@type": "Answer", "text": "<p>Answer 1</p>\n" } }, { "@type": "Question", "name": "Question 2", "acceptedAnswer": { "@type": "Answer", "text": "<p>Answer 2</p>\n" } } ] } </script>

This component depends on the styleguide Expander/Collapser. You have to make sure to include the javascript and CSS file in the page.

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_expander_collapser.css') }}" /> <script src="{{ static("js/ca_styleguide_expander_collapser.js") }}"></script>
  • Default Tab: Only use the js-collapsed at <dd> related
  • Expanded Tab: Only Use the data-expand-collapse-action="collapse" at <dt> related
  • Note: Make sure the CLASS of each <dd> is unique.

Pros & cons table

Pros

  • First point
  • Second point with more text.
  • Third point
  • This is definitely the fourth text.
  • And this one is the fifht.

Cons

  • First point
  • Second point with more text.
  • Third point
  • This is definitely the fourth text.

This is a simple Pros & cons table. To include this kind of table, you just need to use the following code snippet:

<div class="pro-con ca-txt-bd-2"> <div class="pro-con__col pro-con__col--pro"> <h3 class="pro-con__ttl js-no-index"><strong>Pros</strong></h3> <ul class="ca-list"> <li>First point</li> <li>Second point with more text.</li> <li>Third point</li> <li>This is definitely the fourth text.</li> <li>And this one is the fifht.</li> </ul> </div> <div class="pro-con__col pro-con__col--con"> <h3 class="pro-con__ttl js-no-index"><strong>Cons</strong></h3> <ul class="ca-list"> <li>First point</li> <li>Second point with more text.</li> <li>Third point</li> <li>This is definitely the fourth text.</li> </ul> </div> </div>

Bottomline, Pros & cons table

BOTTOM LINE

Many reviewers have been with Progressive for more than 10 years. Customers who positively reviewed Progressive did so for their customer service and roadside assistance features. Most complaints are from consumers who were involved in an accident that was the fault of a driver insured by Progressive Auto.

PROS

  • First point
  • Second point with more text.
  • Third point
  • This is definitely the fourth text.
  • And this one is the fifth.

CONS

  • First point
  • Second point with more text.
  • Third point
  • This is definitely the fourth text.

This is an extended pros & cons table because it includes a bottomline section.

<div class="pro-con pro-con--no-brd ca-txt-bd-2"> <div class="pro-con__col pro-con__col--btm"> <h3 class="pro-con__ttl ca-txt-bd-1"><strong>BOTTOM LINE</strong></h3> <p> Many reviewers have been with Progressive for more than 10 years. Customers who positively reviewed Progressive did so for their customer service and roadside assistance features. Most complaints are from consumers who were involved in an accident that was the fault of a driver insured by Progressive Auto. </p> </div> <div class="pro-con__tbl"> <div class="pro-con__col pro-con__col--pro"> <h3 class="pro-con__ttl ca-txt-bd-1"><strong>PROS</strong></h3> <ul class="ca-list"> <li>First point</li> <li>Second point with more text.</li> <li>Third point</li> <li>This is definitely the fourth text.</li> <li>And this one is the fifth.</li> </ul> </div> <div class="pro-con__col pro-con__col--con"> <h3 class="pro-con__ttl ca-txt-bd-1"><strong>CONS</strong></h3> <ul class="ca-list"> <li>First point</li> <li>Second point with more text.</li> <li>Third point</li> <li>This is definitely the fourth text.</li> </ul> </div> </div> </div>

Text tables

We have several modifiers that we can apply to tables. All of them can be combined together in order to match your content requirements.


Non-responsive version for small tables

If the table is small (two or three columns) and it fit on a mobile device, you can use the non-responsive table version. This one will look exactly on all devices.

City Burglary Odds
Tulsa 1:16209
Oklahoma 1:3204
Norman 1:16320
<table class="ca-tb"> <tr> <th>City</th> <th>Burglary Odds</th> </tr> <tr> <td><span>Tulsa</span></td> <td><span>1:16209</span></td> </tr> <tr> <td><span>Oklahoma</span></td> <td><span>1:3204</span></td> </tr> <tr> <td><span>Norman</span></td> <td><span>1:16320</span></td> </tr> </table>

Icons

You can add arrow icons to the cells to display a tendency on the data. You have to add the following code snippet inside of the cell span:

  • Up arrow: (Green) <span class="ic ic--incr"></span>
  • Up arrow: (Red) <span class="ic ic--incr ic--neg"></span>
  • Down arrow: (Green) <span class="ic ic--decr"></span>
  • Down arrow: (Red) <span class="ic ic--decr ic--neg"></span>
City Burglary Odds
Tulsa 1:16209
Oklahoma 1:3204
Norman 1:16320
Broken Arrow 1:89230
<table class="ca-tb"> <tr> <th>City</th> <th>Burglary Odds</th> </tr> <tr> <td><span>Tulsa</span></td> <td><span><span class="ic ic--incr"></span>1:16209</span></td> </tr> <tr> <td><span>Oklahoma</span></td> <td><span><span class="ic ic--incr ic--neg"></span>1:3204</span></td> </tr> <tr> <td><span>Norman</span></td> <td><span><span class="ic ic--decr"></span>1:16320</span></td> </tr> <tr> <td><span>Broken Arrow</span></td> <td><span><span class="ic ic--decr ic--neg"></span>1:89230</span></td> </tr> </table>

Align-centered cell content

You can center align the content by adding a ca-tb--cnter class to the table.

City Burglary Odds
Tulsa 1:16209
Oklahoma 1:3204
Norman 1:16320
Broken Arrow 1:89230
<table class="ca-tb ca-tb--cnter"> <tr> <th>City</th> <th>Burglary Odds</th> </tr> <tr> <td><span>Tulsa</span></td> <td><span><span class="ic ic--incr"></span>1:16209</span></td> </tr> </table>

Captions

You can add a caption to the table by adding a <caption> tag to the table. (after the last <tr>)

It is positioned at the bottom of the table as default, but you can move it to the top by adding a align="top" attribute to the caption element.

City Burglary Odds
Tulsa 1:16209
Oklahoma 1:3204
* Hi! I'm a table caption
<table class="ca-tb ca-tb--cnter"> <tr> <th>City</th> <th>Burglary Odds</th> </tr> <tr> <td><span>Tulsa</span></td> <td><span>1:16209</span></td> </tr> <caption>caption text</caption> </table>

Resposive table

For bigger tables, you need to make the table responsive, so it would fit on mobile devices. For doing so, you have to add a ca-tb--rspv class to the table. You have also add a data-label attribute to each of the cells (with the exception of the first one) with the table header label.

Remember that in mobile, the table will group by row, and the first cell will be the header.

Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k Crime Rate per 1k Crime Rate per Day
1. Hopkinton, MA 1:16209 83.3% 16.04 5.43 0.24
2. Clark Township, NJ 1:16209 83.3% 16.04 5.43 0.24
3. Adams Township, Butler County, PA 1:16209 83.3% 16.04 5.43 0.24
4. Logan Township, PA 1:16209 83.3% 16.04 5.43 0.24

Cross-axis table

If you want to highlight the first column of the table, you have to add a ca-tb--crsstb class to the table.

Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k Crime Rate per 1k Crime Rate per Day
1. Hopkinton, MA 1:16209 83.3% 16.04 5.43 0.24
2. Clark Township, NJ 1:16209 83.3% 16.04 5.43 0.24
3. Adams Township, Butler County, PA 1:16209 83.3% 16.04 5.43 0.24
4. Logan Township, PA 1:16209 83.3% 16.04 5.43 0.24
<table class="ca-tb ca-tb--rspv ca-tb--crsstb"> <tr> <th>Rank &amp; city</th> <th>Burglary Odds</th> <th>Change in Burglary Rate</th> <th>Police Officers per 10k</th> <th>Crime Rate per 1k</th> <th>Crime Rate per Day</th> </tr> <tr> <td>1. Hopkinton, MA</td> <td data-label="Burglary Odds"><span>1:16209</span></td> <td data-label="Change in Burglary Rate"><span><span class="ic ic--decr ic--neg"></span>83.3%</span></td> <td data-label="Police Officers per 10k"><span>16.04</span></td> <td data-label="Crime Rate per 1k"><span>5.43</span></td> <td data-label="Crime Rate per Day"><span>0.24</span></td> </tr> </table>

Color combinations

You can choose which color goes on which axis of the table. This way, if the table isn't as important, we can keep it in gray, and if it's the most important part of the article, it can be in the blue to stand out more. You just need to add a class to the table element. The full list is the following:

  • X-axis:
    • Blue: (Default) you don't need to add any class.
    • Light blue: ca-tb--lg-blue-x
    • Gray: ca-tb--gray-x
    • Light gray: ca-tb--lg-gray-x
  • Y-axis:
    • Blue: ca-tb--blue-y
    • Light blue: (Default) you don't need to add any class.
    • Gray: ca-tb--gray-y
    • Light gray: ca-tb--lg-gray-y

Examples

Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
(No classes needed)
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--gray-y
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--lg-gray-y
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--lg-blue-x ca-tb--blue-y
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--lg-blue-x ca-tb--gray-y
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--lg-blue-x ca-tb--lg-gray-y
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--gray-x ca-tb--blue-y
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--gray-x
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--gray-x ca-tb--lg-gray-y
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--lg-gray-x ca-tb--blue-y
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--lg-gray-x
Rank & city Burglary Odds Change in Burglary Rate Police Officers per 10k
1. Hopkinton, MA 1:16209 83.3% 16.04
2. Clark Township, NJ 1:16209 83.3% 16.04
ca-tb--lg-gray-x ca-tb--gray-y


Brand comparison table

For the brand comparison table we need to create two tables (one for desktop, one for mobile).

Modifiers

You can apply several modifier classes:

  • ca-tb--fix: Sets a fixed table layout, the column widths are divided equally across the table.
  • ca-tb--white-x: For a white table header.
  • ca-tb--md: For a white table header.
  • ca-tb--dsk: Makes the table visible only on tablet/desktop.
  • ca-tb--mbl: Makes the table visible only on mobile.

If you want to highlight any row, you can add a ca-tb__tr-hgl class to the table row (<tr>)

Icons / logos

Inside the cells, you can add icons using <svg>. The default color for icons is black. You can change it to green by adding a ca-tb__ic-green class to the table cell (<td>) or a ca-tb__ic-red class for red.

In the table header, you can use:

  • Logo: by adding an image tag
  • Logo + name: You need to add the image tag, and the company name inside a span tag
  • Company Name: by adding the company name inside a span tag

Links

You can add links inside any of the cells, just use the following code snippet:

<a href="The URL here" class="ca-a-lg ca-a--arw">The link text here</a>
ADTADT Guardian Protection Services
Price per month $34.99 $49.99 $36.99
100% Wireless
Equipment fee $99 $89 $149
Contract 36 months Up to 60 months Up to 90 months
Plans Personal Loans Personal Loans Personal Loans
Price per month 100% Wireless Equipment fee Contract Plans
$34.99 $99 36 months Personal Loans
ADTADT $34.99 $99 36 months Personal Loans
Guardian Protection Services $34.99 $99 36 months Personal Loans
<!--Desktop/tablet table--> <table class="ca-tb ca-tb--cnter ca-tb--white-x ca-tb--md ca-tb--fix ca-tb--dsk ca-tb--brand"> <tr> <th></th> <th><img src="Any image url" alt="Alternative Title"/></th> <th><img alt="ADT" src="Any image url" /><span class="ca-h4">ADT</span></th> <th><span class="ca-h4">Guardian Protection Services</span></th> </tr> <tr> <td><strong>Equipment fee</strong></td> <td>$99</td> <td>$89</td> <td>$149</td> </tr> <tr class="ca-tb__tr-hgl"> <td><strong>Contract</strong></td> <td><strong>36 months</strong></td> <td><strong>Up to 60 months</strong></td> <td><strong>Up to 90 months</strong></td> </tr> <tr> <td><strong>Plans</strong></td> <td><a href="#" class="ca-a-lg ca-a--arw">Personal Loans</a></td> <td><a href="#" class="ca-a-lg ca-a--arw">Personal Loans</a></td> <td><a href="#" class="ca-a-lg ca-a--arw">Personal Loans</a></td> </tr> </table> <!--Mobile table--> <table class="ca-tb ca-tb--cnter ca-tb--white-x ca-tb--fix ca-tb--mbl ca-tb--rspv ca-tb--brand"> <tr> <th></th> <th>Price per month</th> <th>100% Wireless</th> <th>Equipment fee</th> <th>Contract</th> <th>Plans</th> </tr> <tr> <td class="ca-tb__brnd"><img src="image url" /></td> <td data-label="Price per month"><span>$34.99</span></td> <td data-label="100% Wireless" class="ca-tb__ic-green"><span>you can place an SVG here</span></td> <td data-label="Equipment fee"><span>$99</span></td> <td data-label="Contract" class="ca-tb__tr-hgl"><span><strong>36 months</strong></span></td> <td data-label="Plans"><span><a href="#" class="ca-a-lg ca-a--arw">Link</a></span></td> </tr> </table>
NOTE: Remember to add the 'alt'(ALternative Title) property to all images.


Brand overview table

You can use the following code snippet for brand comparison. The module is a table for SEO reasons.

Label Accredited Partner Company name Logo Contact Summary
Most popular provider Accredited Partner Vector Security Get a Free Quote
  • Installation: DIY
  • Monitoring: Professional or DIY
  • Customer Support: 24/7
Label Company name Logo Contact Summary
Best value Vector Security
  • Full-service moving company with a la carte options
  • Loading, unloading and storage options
Label Company name Logo Contact Summary
Runner-up Guardian protection services
  • Installation: DIY
  • Monitoring: Professional or DIY
  • Customer Support: 24/7
<table class="brnd-ovw"> <tr class="brnd-ovw__row"> <td class="brnd-ovw__col"> <table class="brnd-tb brnd-tb--in-tb"> <thead> <tr> <th>Label</th> <th>Accredited Partner</th> <th>Company name</th> <th>Logo</th> <th>Contact</th> <th>Summary</th> </tr> </thead> <tbody> <tr> <td class="brnd-tb__lbl brnd-tb__lbl--hglg"><strong>Most popular provider</strong></td> <td class="brnd-tb__acc"> <a class="brnd-tb__accr-prtnr ca-a--thrd" rel="noopener" target="_blank" href="https://www.consumeraffairs.com/about/faq/"> <span class="brnd-tb__shld"> {% include "frontend/icons/rebrand/top-rated.html" %} </span> <span>Accredited Partner</span> </a> </td> <td class="brnd-tb__name ca-txt-bd-1">Vector Security</td> <td class="brnd-tb__logo"><img src="http://media.consumeraffairs.com/files/cache/logos/frontpoint-security_logo_2201_widget_logo.png" alt="Frontpoint Logo"/></td> <td class="brnd-tb__cntc"> <a class="ca-btn ca-btn--sm-pad ca-btn--green" target="_blank" href="www.consumeraffairs.com"> Get a Free Quote </a> <button class="ca-btn--sm-pad">{% include "frontend/icons/solid-phone.html" %} (855) 123-5372</button> <button class="ca-btn ca-btn--orange ca-btn--sm-pad">Learn More</button> </td> <td class="brnd-tb__smmry ca-txt-bd-2"> <ul class="ca-list brnd-tb__list"> <li><strong>Installation:</strong> DIY</li> <li><strong>Monitoring:</strong> Professional or DIY</li> <li><strong>Customer Support:</strong> 24/7</li> </ul> </td> </tr> </tbody> </table> </td> <td class="brnd-ovw__col"> <table class="brnd-tb brnd-tb--in-tb"> <thead> <tr> <th>Label</th> <th>Company name</th> <th>Logo</th> <th>Contact</th> <th>Summary</th> </tr> </thead> <tbody> <tr> <td class="brnd-tb__lbl">Best value</td> <td class="brnd-tb__acc"></td> <td class="brnd-tb__name ca-txt-bd-1">Vector Security</td> <td class="brnd-tb__logo"><img alt="ADT" src="http://media.consumeraffairs.com/files/cache/logos/adt_logo_14433_ratings_box_logo_jpeg.jpg" /></td> <td class="brnd-tb__cntc"> <button class="ca-btn--sm-pad">{% include "frontend/icons/solid-phone.html" %} (855) 123-5372</button> </td> <td class="brnd-tb__smmry ca-txt-bd-2"> <ul class="ca-list brnd-tb__list"> <li>Full-service moving company with a la carte options</li> <li>Loading, unloading and storage options</li> </ul> </td> </tr> </tbody> </table> </td> <td class="brnd-ovw__col"> <table class="brnd-tb brnd-tb--in-tb"> <thead> <tr> <th>Label</th> <th>Company name</th> <th>Logo</th> <th>Contact</th> <th>Summary</th> </tr> </thead> <tbody> <tr> <td class="brnd-tb__lbl">Runner-up</td> <td class="brnd-tb__acc"></td> <td class="brnd-tb__name ca-txt-bd-1">Guardian protection services</td> <td class="brnd-tb__logo"><img src="http://media.consumeraffairs.com/files/cache/logos/dean-enterprises_logo_1330_ratings_box_logo_jpeg.JPG"></td> <td class="brnd-tb__cntc"> <button class="ca-btn ca-btn--sm-pad ca-btn--orange">Learn More</button> <button class="ca-btn--sm-pad">{% include "frontend/icons/solid-phone.html" %} (855) 123-5372</button> </td> <td class="brnd-tb__smmry ca-txt-bd-2"> <ul class="ca-list brnd-tb__list"> <li><strong>Installation:</strong> DIY</li> <li><strong>Monitoring:</strong> Professional or DIY</li> <li><strong>Customer Support:</strong> 24/7</li> </ul> </td> </tr> </tbody> </table> </td> </tr> </table>

Brand overview table V2

You can use the following code snippet for the new brand comparison layout. The module is a table for SEO reasons.

Label Logo Contact Summary
Most popular provider
  • Installation: DIY
  • Monitoring: Professional or DIY
  • Customer Support: 24/7

TOLL FREE NUMBER

(855) 123-5372
Label Logo Contact Summary
Best value
  • Full-service moving company with a la carte options
  • Loading, unloading and storage options

TOLL FREE NUMBER

(855) 123-5372
Label Logo Contact Summary
Runner-up
  • Installation: DIY
  • Monitoring: Professional or DIY
  • Customer Support: 24/7

TOLL FREE NUMBER

(855) 123-5372
<table class="brnd-ovw"> <tr class="brnd-ovw__row"> <td class="brnd-ovw__col"> <table class="brnd-tb--v2 brnd-tb--v2--in-tb"> <thead> <tr> <th>Label</th> <th>Logo</th> <th>Contact</th> <th>Summary</th> </tr> </thead> <tbody> <tr> <td class="brnd-tb--v2__lbl">Most popular provider</td> <td class="brnd-tb--v2__logo"><img src="http://media.consumeraffairs.com/files/cache/logos/frontpoint-security_logo_2201_widget_logo.png" alt="Frontpoint Logo"/></td> <td class="brnd-tb--v2__smmry ca-txt-bd-2"> <ul class="ca-list brnd-tb--v2__list"> <li><strong>Installation:</strong> DIY</li> <li><strong>Monitoring:</strong> Professional or DIY</li> <li><strong>Customer Support:</strong> 24/7</li> </ul> </td> <td class="brnd-tb--v2__cntc"> <p class="brnd-tb--v2__phone-txt">TOLL FREE NUMBER</p> <a href="tel:+18551235372" class="brnd-tb--v2__phone">(855) 123-5372</a> <button class="ca-btn ca-btn--hollow ca-btn--sm-pad">Learn More</button> </td> </tr> </tbody> </table> </td> <td class="brnd-ovw__col"> <table class="brnd-tb--v2 brnd-tb--v2--in-tb"> <thead> <tr> <th>Label</th> <th>Logo</th> <th>Contact</th> <th>Summary</th> </tr> </thead> <tbody> <tr> <td class="brnd-tb--v2__lbl">Best value</td> <td class="brnd-tb--v2__logo"><img alt="ADT" src="http://media.consumeraffairs.com/files/cache/logos/adt_logo_14433_ratings_box_logo_jpeg.jpg" /></td> <td class="brnd-tb--v2__smmry ca-txt-bd-2"> <ul class="ca-list brnd-tb--v2__list"> <li>Full-service moving company with a la carte options</li> <li>Loading, unloading and storage options</li> </ul> </td> <td class="brnd-tb--v2__cntc"> <p class="brnd-tb--v2__phone-txt">TOLL FREE NUMBER</p> <a href="tel:+18551235372" class="brnd-tb--v2__phone">(855) 123-5372</a> </td> </tr> </tbody> </table> </td> <td class="brnd-ovw__col"> <table class="brnd-tb--v2 brnd-tb--v2--in-tb"> <thead> <tr> <th>Label</th> <th>Logo</th> <th>Contact</th> <th>Summary</th> </tr> </thead> <tbody> <tr> <td class="brnd-tb--v2__lbl">Runner-up</td> <td class="brnd-tb--v2__logo"><img src="http://media.consumeraffairs.com/files/cache/logos/dean-enterprises_logo_1330_ratings_box_logo_jpeg.JPG"></td> <td class="brnd-tb--v2__smmry ca-txt-bd-2"> <ul class="ca-list brnd-tb--v2__list"> <li><strong>Installation:</strong> DIY</li> <li><strong>Monitoring:</strong> Professional or DIY</li> <li><strong>Customer Support:</strong> 24/7</li> </ul> </td> <td class="brnd-tb--v2__cntc"> <p class="brnd-tb--v2__phone-txt">TOLL FREE NUMBER</p> <a href="tel:+18551235372" class="brnd-tb--v2__phone">(855) 123-5372</a> <button class="ca-btn ca-btn--sm-pad ca-btn--hollow">Learn More</button> <button class="ca-btn ca-btn--sm-pad ca-btn--dark-red">GET A FREE QUOTE</button> </td> </tr> </tbody> </table> </td> </tr> </table>

New Brand overview table V2

You can use the following code snippet for the new brand comparison layout. The module is a table for SEO reasons.

Label Logo Contact Summary
Most Popular Provider
  • Installation DIY
  • Monitoring Professional or DIY
  • Customer Support 24/7

TOLL FREE NUMBER

(855) 123-5372
Label Logo Contact Summary
Best  Value
  • Installation DIY
  • Monitoring Professional or DIY
  • Customer Support 24/7

TOLL FREE NUMBER

(855) 123-5372
Label Logo Contact Summary
Best  Runner-up
  • Installation DIY
  • Monitoring Professional or DIY
  • Customer Support 24/7

TOLL FREE NUMBER

(855) 123-5372
<table class="brnd-ovw"> <tr class="brnd-ovw__row"> <td class="brnd-ovw__col"> <table class="brnd-tb--v2 brnd-tb--v2--in-tb"> <thead> <tr> <th>Label</th> <th>Logo</th> <th>Contact</th> <th>Summary</th> </tr> </thead> <tbody> <tr> <td class="brnd-tb--v2__lbl brnd-tb--v2__lbl--new"> Most&nbsp;<strong>Popular Provider</strong> </td> <td class="brnd-tb--v2__logo"><img src="http://media.consumeraffairs.com/files/cache/logos/frontpoint-security_logo_2201_widget_logo.png" alt="Frontpoint Logo"/></td> <td class="brnd-tb--v2__smmry brnd-tb--v2__smmry--new ca-txt-bd-2"> <ul class="ca-list brnd-tb--v2__list brnd-tb--v2__list--new"> <li><strong>Installation</strong> <span>DIY</span></li> <li><strong>Monitoring</strong> <span>Professional or DIY</span></li> <li><strong>Customer Support</strong> <span>24/7</span></li> </ul> </td> <td class="brnd-tb--v2__cntc"> <p class="brnd-tb--v2__phone-txt">TOLL FREE NUMBER</p> <a href="tel:+18551235372" class="brnd-tb--v2__phone">(855) 123-5372</a> <button class="ca-btn ca-btn--hollow ca-btn--sm-pad">Learn More</button> </td> </tr> </tbody> </table> </td> <td class="brnd-ovw__col"> <table class="brnd-tb--v2 brnd-tb--v2--in-tb"> <thead> <tr> <th>Label</th> <th>Logo</th> <th>Contact</th> <th>Summary</th> </tr> </thead> <tbody> <tr> <td class="brnd-tb--v2__lbl brnd-tb--v2__lbl--new"> Best&nbsp;<strong> Value</strong> </td> <td class="brnd-tb--v2__logo"><img alt="ADT" src="http://media.consumeraffairs.com/files/cache/logos/adt_logo_14433_ratings_box_logo_jpeg.jpg" /></td> <td class="brnd-tb--v2__smmry brnd-tb--v2__smmry--new ca-txt-bd-2"> <ul class="ca-list brnd-tb--v2__list brnd-tb--v2__list--new"> <li><strong>Installation</strong> <span>DIY</span></li> <li><strong>Monitoring</strong> <span>Professional or DIY</span></li> <li><strong>Customer Support</strong> <span>24/7</span></li> </ul> </td> <td class="brnd-tb--v2__cntc brnd-tb--v2__cntc--new"> <p class="brnd-tb--v2__phone-txt">TOLL FREE NUMBER</p> <a href="tel:+18551235372" class="brnd-tb--v2__phone">(855) 123-5372</a> </td> </tr> </tbody> </table> </td> <td class="brnd-ovw__col"> <table class="brnd-tb--v2 brnd-tb--v2--in-tb"> <thead> <tr> <th>Label</th> <th>Logo</th> <th>Contact</th> <th>Summary</th> </tr> </thead> <tbody> <tr> <td class="brnd-tb--v2__lbl brnd-tb--v2__lbl--new"> Best&nbsp;<strong> Runner-up</strong> </td> <td class="brnd-tb--v2__logo"><img src="http://media.consumeraffairs.com/files/cache/logos/dean-enterprises_logo_1330_ratings_box_logo_jpeg.JPG"></td> <td class="brnd-tb--v2__smmry brnd-tb--v2__smmry--new ca-txt-bd-2"> <ul class="ca-list brnd-tb--v2__list brnd-tb--v2__list--new"> <li><strong>Installation</strong> <span>DIY</span></li> <li><strong>Monitoring</strong> <span>Professional or DIY</span></li> <li><strong>Customer Support</strong> <span>24/7</span></li> </ul> </td> <td class="brnd-tb--v2__cntc brnd-tb--v2__cntc--new"> <p class="brnd-tb--v2__phone-txt">TOLL FREE NUMBER</p> <a href="tel:+18551235372" class="brnd-tb--v2__phone">(855) 123-5372</a> <button class="ca-btn ca-btn--sm-pad ca-btn--hollow">Learn More</button> <button class="ca-btn ca-btn--sm-pad ca-btn--dark-red">GET A FREE QUOTE</button> </td> </tr> </tbody> </table> </td> </tr> </table>

Single Brand CTA

You can use the following code snippets for a feature an accredited brand on content pieces/pages.

Frame split

Best Coverage

American Home Shield

Not rated
  • Number of plans

    4 Plan Options

  • Contract Length

    1 year

Get covered now
<div class="sngl-brnd"> <header class="sngl-brnd__header"> <p class="sngl-brnd__best-bagde">Best Coverage</p> <img class="sngl-brnd__logo" src="http://media.consumeraffairs.com/files/cache/logos/frontpoint-security_logo_2201_widget_logo.png" alt="Frontpoint Logo"/> </header> <section class="sngl-brnd__content"> <p class="sngl-brnd__name">American Home Shield</p> <img src="../../static/img/icons/stars/stars-4.svg" alt="Not rated" class="stars-rtg stars-rtg--sm"> <ul class="sngl-brnd__feats"> <li class="sngl-brnd__feat"> <p class="sngl-brnd__feat-name">Number of plans</p> <p class="sngl-brnd__feat-desc">4 Plan Options</p> </li> <li class="sngl-brnd__divider"></li> <li class="sngl-brnd__feat"> <p class="sngl-brnd__feat-name">Contract Length</p> <p class="sngl-brnd__feat-desc">1 year</p> </li> </ul> <a href="tel:+1123123123" class="sngl-brnd__btn ca-btn ca-btn--dark-red"> Get covered now </a> </section> </div>

Diagonal

Best Coverage

  • Number of plans

    4 Plan Options

  • Contract Length

    1 year

Get covered now
<div class="sngl-brnd--diagonal"> <header class="sngl-brnd--diagonal__header"> <p class="sngl-brnd--diagonal__best-bagde">Best Coverage</p> <img class="sngl-brnd--diagonal__logo" src="http://media.consumeraffairs.com/files/cache/logos/frontpoint-security_logo_2201_widget_logo.png" alt="Frontpoint Logo"/> </header> <section class="sngl-brnd--diagonal__content"> <ul class="sngl-brnd--diagonal__feats"> <li class="sngl-brnd--diagonal__feat"> <p class="sngl-brnd--diagonal__feat-name">Number of plans</p> <p class="sngl-brnd--diagonal__feat-desc">4 Plan Options</p> </li> <li class="sngl-brnd--diagonal__feat"> <p class="sngl-brnd--diagonal__feat-name">Contract Length</p> <p class="sngl-brnd--diagonal__feat-desc">1 year</p> </li> </ul> <a href="tel:+1123123123" class="ca-btn ca-btn--dark-red ca-btn--md"> Get covered now </a> </section> </div>

Image + List

You can use the following code snippet for a feature an accredited brand on content pieces/pages.

Module Title

Frontpoint Logo

Heading 2

Fixie tote bag ethnic keytar. Neutra vinyl American Apparel kale chips tofu art party, cardigan raw denim

Heading 2

  • Tousled food truck polaroid, salvia bespoke
  • small batch Pinterest Marfa. Fingerstache
  • authentic craft beer, food truck Banksy Carles
  • kale chips hoodie. Trust fund artisan master
<div class="sngl-brnd--img-lst"> <header class="sngl-brnd--img-lst__header"> <h2 class="sngl-brnd--img-lst__title">Module Title</h2> </header> <section class="sngl-brnd--img-lst__cnt"> <div class="sngl-brnd--img-lst__main-cnt"> <img class="sngl-brnd--img-lst__img" src="https://c4d709dd302a2586107d-f8305d22c3db1fdd6f8607b49e47a10c.ssl.cf1.rackcdn.com/thumbnails/stock-images/adfbe2fdd83d8538bac134f849cd3517.png" alt="Frontpoint Logo"/> <h2 class="sngl-brnd--img-lst__subtitle sngl-brnd--img-lst__subtitle--mobile">Heading 2</h2> <div class="sngl-brnd--img-lst__desc"> Fixie tote bag ethnic keytar. Neutra vinyl American Apparel kale chips tofu art party, cardigan raw denim </div> <div class="sngl-brnd--img-lst__btn-cntnr"> <a href="tel:+1123123123" class="sngl-brnd--img-lst__btn ca-btn"> See Info </a> </div> </div> <div class="sngl-brnd--img-lst__adtnl-cnt"> <h2 class="sngl-brnd--img-lst__subtitle sngl-brnd--img-lst__subtitle--desktop">Heading 2</h2> <ul class="sngl-brnd--img-lst__feats"> <li class="sngl-brnd--img-lst__feat"> Tousled food truck polaroid, salvia bespoke </li> <li class="sngl-brnd--img-lst__feat"> small batch Pinterest Marfa. Fingerstache </li> <li class="sngl-brnd--img-lst__feat"> authentic craft beer, food truck Banksy Carles </li> <li class="sngl-brnd--img-lst__feat"> kale chips hoodie. Trust fund artisan master </li> </ul> </div> </section> </div>

Block quotes

Make sure to include the CSS into your page or project:

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_quotes.css') }}" />

We have several kinds of quotations styles.

Standard

Toto, I’ve a feeling we’re not in Kansas anymore.”
<blockquote class="quote quote--q">Toto, I&rsquo;ve a feeling we&rsquo;re not in Kansas anymore.&rdquo;</blockquote>

Quote attribution

The first rule of Fight Club is you do not talk about Fight Club.”
— Tyler Durden

If you want to add the quote attribution, you need to use the following markup:

<figure class="quote quote--q"> <blockquote>The first rule of Fight Club is you do not talk about Fight Club.&rdquo;</blockquote> <figcaption>&mdash; Tyler Durden</figcaption> </figure>

Aligned to the left

Roads? Where we're going we don't need roads.”
— Dr. Emmett Brown

If you want to use the quote as a little box aligned to the left, you have to add the quote--sm and quote--lf classes to the figure element.

<figure class="quote quote--q quote--sm quote--lf"> <blockquote>Your text here. &rdquo;</blockquote> <figcaption>— The quote attribution</figcaption> </figure>

Aligned to the right

I’m the king of the world!.”
— Jack Dawson

In the other hand, if you want to use the quote as a little box aligned to the right, you have to add the quote--sm and quote--rg classes to the figure element.

<figure class="quote quote--q quote--sm quote--rg"> <blockquote>Your text here. &rdquo;</blockquote> <figcaption>— The quote attribution</figcaption> </figure>

Version B

Aligned to the left

“Mama says: Stupid is as stupid does.”
— Forrest Gump

We have another version of the quote, with a different design. This version also can be aligned to the left as the previous one, and you need to add the quote--b class to the figure element, as the following markup:

<figure class="quote quote--b quote--sm quote--lf"> <blockquote>Your text here. &rdquo;</blockquote> <figcaption>— The quote attribution</figcaption> </figure>

Aligned to the right

“They call it a Royale with cheese.”
— Vincent Vega

If you want to align it to the right, you just need to use quote--rg instead of quote--lf

<figure class="quote quote--b quote--sm quote--rg"> <blockquote>Your text here. &rdquo;</blockquote> <figcaption>— The quote attribution</figcaption> </figure>

Blue box version

“Help me, Obi-Wan Kenobi. You're my only hope..”
— Princess Leia

For the blue version of the box, you need to add a quote--bg class to the figure element. As before, you can use quote--lf to align it to the left, or quote--rg to align it to the right.

<figure class="quote quote--bg quote--sm quote--lf"> <blockquote>Your text here. &rdquo;</blockquote> <figcaption>— The quote attribution</figcaption> </figure>

Quick tips

The average person spends
$591/YEAR
repairing items that could be covered in a home warranty

This box can be used to place any other content you want to highlight, or for a quick tip. If you want to add an icon, just paste an SVG code at the beginning of the blockquote, you can also use any other HTML markup to style the data.

  • <strong>: for bold
  • <i>: for italic
<blockquote class="quote quote--bg quote--sm quote--lf"> Any content here </blockquote>
The average person spends
$591/YEAR
repairing items that could be covered in a home warranty

You can also make the text bigger or smaller by adding a <span> or a <p> tag with the different font sizes classes:

  • ca-h1: 24px mobile / 40px tablet-desktop
  • ca-h2: 22px mobile / 32px tablet-desktop
  • ca-h3: 18px mobile / 26px tablet-desktop
  • ca-h4: 16px mobile / 22px tablet-desktop
  • ca-txt-bd-1: 14px mobile / 18px tablet-desktop
  • ca-txt-bd-2: 14px mobile / 16px tablet-desktop
  • ca-txt-cpt: 10px mobile / 12px tablet-desktop
  • ca-txt-cpt-2: 10px

Gray box version

“I’m having an old friend for dinner”
— Hannibal Lecter

If you want the box gray, you just have to add the quote--bg-gray class to the figure element.

<figure class="quote quote--bg quote--bg-gray quote--sm quote--lf"> <blockquote>&ldquo;Your text here.&rdquo;</blockquote> <figcaption>— The quote attribution</figcaption> </figure>

Quick tips

The average person spends
$591/YEAR
repairing items that could be covered in a home warranty

As the blue box, the gray box can be used for quick tips or highlights. Check the blue box quick tips documentation for further reference.

<blockquote class="quote quote--bg quote--bg-gray quote--sm quote--lf"> Any content here </blockquote>
Save money by:
  • Getting a raise
  • Spending less
  • Auto-withdraw to savings accounts



Photo styles

Implementation

For better user experience and performance, you will have to have 3 versions of the photo with different widths but same aspect ratio:

Horizontal image - widths
  • 737px
  • 626px
  • 340px
Vertical image - widths
  • 330px
  • 280px
  • 170px

To use the photo styles, you have to insert the image inside the figure tag, add the ca-img class, and the desired style class to it:

<figure class="ca-img STYLE_CLASS"> <img alt="" class="lazy-load" data-sizes="(max-width: 400px) 340px, (max-width: 768px) 626px, 737px" data-src="/path/to/737px.jpg" data-srcset="/path/to/340px.jpg 340w, /path/to/626px.jpg 626w, /path/to/737px.jpg 737w" /> </figure>

Note: if you are inserting images from the admin, the path to the images will already be set.

STYLE_CLASS can be one of the following:

  • hfw - stands for Horizontal Full Width - <figure class="hfw">
  • vla - stands for Vertical Left Aligned - <figure class="vla">
  • vra - stands for Vertical Right Aligned - <figure class="vra">

If you want to insert captions, you just need to add <figcaption> after the <img>, inside the figure element:

<figure class="ca-img STYLE_CLASS"> <img alt="" class="lazy-load" data-sizes="(max-width: 400px) 340px, (max-width: 768px) 626px, 737px" data-src="/path/to/737px.jpg" data-srcset="/path/to/340px.jpg 340w, /path/to/626px.jpg 626w, /path/to/737px.jpg 737w" /> <figcaption>Photo caption style</figcaption> </figure>

If you want to stop the text from being floated to the side of the image, you should add the HR tag highlighted bellow:

<figure class="ca-img STYLE_CLASS"> <img alt="" class="lazy-load" data-sizes="(max-width: 400px) 340px, (max-width: 768px) 626px, 737px" data-src="/path/to/737px.jpg" data-srcset="/path/to/340px.jpg 340w, /path/to/626px.jpg 626w, /path/to/737px.jpg 737w" /> <figcaption>Photo caption style</figcaption> </figure> <p>Paragrah with long text that is floated to one of the sides of the image</p> <hr class="ca-clear" /> <p>This paragraph will continue after the image</p>

Demo

Horizontal full-width

Photo caption style - Horizontal image. The caption can be very very very very very very very very very very very very very long and if so it will be wrapped to the size of the image.

Left aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Aliquam tincidunt nisl in neque aliquam sagittis. Nunc id condimentum sem, ac ullamcorper arcu. Nullam lectus elit, mattis at ornare porta, tincidunt at ex. Morbi ut nunc interdum, ultrices ipsum et, lobortis justo. Sed auctor ultricies nisl in porta. In placerat nisi nec tincidunt fringilla. Sed eleifend leo semper, maximus augue quis, vulputate nisl. Donec id finibus lectus. Ut vel eleifend nisl. Sed ornare faucibus velit, at molestie velit finibus quis. Phasellus eleifend nec lacus eget facilisis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.


Photo caption style - Vertical left aligned image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Aliquam tincidunt nisl in neque aliquam sagittis. Nunc id condimentum sem, ac ullamcorper arcu. Nullam lectus elit, mattis at ornare porta, tincidunt at ex. Morbi ut nunc interdum, ultrices ipsum et, lobortis justo. Sed auctor ultricies nisl in porta. In placerat nisi nec tincidunt fringilla. Sed eleifend leo semper, maximus augue quis, vulputate nisl. Donec id finibus lectus. Ut vel eleifend nisl. Sed ornare faucibus velit, at molestie velit finibus quis. Phasellus eleifend nec lacus eget facilisis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.


Right aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Aliquam tincidunt nisl in neque aliquam sagittis. Nunc id condimentum sem, ac ullamcorper arcu. Nullam lectus elit, mattis at ornare porta, tincidunt at ex. Morbi ut nunc interdum, ultrices ipsum et, lobortis justo. Sed auctor ultricies nisl in porta. In placerat nisi nec tincidunt fringilla. Sed eleifend leo semper, maximus augue quis, vulputate nisl. Donec id finibus lectus. Ut vel eleifend nisl. Sed ornare faucibus velit, at molestie velit finibus quis. Phasellus eleifend nec lacus eget facilisis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.


Photo caption style - Vertical right aligned image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Aliquam tincidunt nisl in neque aliquam sagittis. Nunc id condimentum sem, ac ullamcorper arcu. Nullam lectus elit, mattis at ornare porta, tincidunt at ex. Morbi ut nunc interdum, ultrices ipsum et, lobortis justo. Sed auctor ultricies nisl in porta. In placerat nisi nec tincidunt fringilla. Sed eleifend leo semper, maximus augue quis, vulputate nisl. Donec id finibus lectus. Ut vel eleifend nisl. Sed ornare faucibus velit, at molestie velit finibus quis. Phasellus eleifend nec lacus eget facilisis.


Left and right aligned

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Photo caption style - Vertical left aligned image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Aliquam tincidunt nisl in neque aliquam sagittis. Nunc id condimentum sem, ac ullamcorper arcu. Nullam lectus elit, mattis at ornare porta, tincidunt at ex. Morbi ut nunc interdum, ultrices ipsum et, lobortis justo. Sed auctor ultricies nisl in porta. In placerat nisi nec tincidunt fringilla. Sed eleifend leo semper, maximus augue quis, vulputate nisl. Donec id finibus lectus. Ut vel eleifend nisl. Sed ornare faucibus velit, at molestie velit finibus quis. Phasellus eleifend nec lacus eget facilisis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.

Aliquam tincidunt nisl in neque aliquam sagittis. Nunc id condimentum sem, ac ullamcorper arcu. Nullam lectus elit, mattis at ornare porta, tincidunt at ex. Morbi ut nunc interdum, ultrices ipsum et, lobortis justo. Sed auctor ultricies nisl in porta. In placerat nisi nec tincidunt fringilla. Sed eleifend leo semper, maximus augue quis, vulputate nisl. Donec id finibus lectus. Ut vel eleifend nisl. Sed ornare faucibus velit, at molestie velit finibus quis. Phasellus eleifend nec lacus eget facilisis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt libero nec iaculis laoreet. Praesent sit amet pulvinar arcu. In sit amet vulputate augue, eget tincidunt dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non eros purus. Pellentesque elit ligula, porttitor ac velit sit amet, cursus malesuada augue. Duis volutpat volutpat neque vel hendrerit. Praesent ac ante vitae metus lacinia dapibus vel ac lorem.

Donec venenatis est non nisl condimentum, in accumsan justo lacinia. Donec vel eros arcu. Suspendisse quis turpis tortor. Suspendisse suscipit diam arcu, quis commodo eros rhoncus a. Quisque varius lacus quis molestie condimentum. In orci dui, lobortis lobortis enim non, accumsan tempus elit. Sed ut diam ornare, sodales orci in, tincidunt nulla. Fusce et sollicitudin tortor, a rutrum lorem. Aenean a elit ut lorem ultricies vulputate at a justo. Proin rutrum, nisl vitae aliquam ullamcorper, purus nisi dapibus lorem, fringilla ullamcorper nisl turpis cursus felis. Quisque feugiat tincidunt arcu, vitae vehicula massa tincidunt et.





Third party interactive content

In order to add third party interactive content on the page, you can use the following component, what will open the content in a modal.

You just need to complete the data-src="" attribute with the preview image, and the data-ca-modal-src="" with the iframe URL in the code snippet:

<button class="int-cnt ca-btn--link bg-lazy-load" data-src="[Preview image URL]" data-ca-modal-src="[Iframe URL]" data-ca-modal-type="iframe" data-ca-modal-size="lg" data-ca-modal-hide-header="true"> <span class="int-cnt__lbl">Click to interact</span> <span class="int-cnt__btn ca-btn ca-btn--white ca-btn--rnd ca-btn--play ca-btn--sm-pad">{% include "base/common/icons/play-icon.html" %}</span> </button>

This component depends on the styleguide modal. You have to make sure to include the javascript and CSS file in the page.

<link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_styleguide_modal.css') }}" /> <script src="{{ static("js/ca_styleguide_modal.js") }}"></script>

Iframe modal

Add an iframe modal link to the page using the code below:

<a href="#" data-ca-modal-type="iframe" data-ca-modal-src="https://es6.io/" data-ca-modal-size="lg" data-ca-modal-hide-header="true" data-ca-modal-name="The Iframe Modal" >Open Modal</a>

Properties

Property Description Options
data-ca-modal-type Defines the type of the modal, it should always be "iframe" iframe
data-ca-modal-src Defines the page that will show inside the modal, it should be an url Any kind of url
data-ca-modal-size Defines the size of the modal and it's not required, the default value will be "md" xs | sm | md | lg
data-ca-modal-hide-header Defines if the header of the modal will show up or not, the default value is "false" true | false
data-ca-modal-name If the modal has a header this will be the header text Any kind of text

Examples

A modal with header

<a href="#" data-ca-modal-type="iframe" data-ca-modal-src="https://es6.io/" data-ca-modal-name="Iframe modal with a header" >Open Modal</a> Open Modal

A modal without header

<a href="#" data-ca-modal-type="iframe" data-ca-modal-src="https://es6.io/" data-ca-modal-hide-header="true" >Open Modal</a> Open Modal