Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #161 from duckduckgo/doug/styleguide-naming-updates

Styleguide - Renaming 'Text' Content Layouts
  • Loading branch information...
commit e82909d92303dd97c5f684634c9ffcd5873e5519 2 parents 56e8494 + 455bfd2
@sdougbrown sdougbrown authored
Showing with 25 additions and 25 deletions.
  1. +25 −25 share/site/duckduckgo/styleguide.tx
View
50 share/site/duckduckgo/styleguide.tx
@@ -604,19 +604,19 @@
<h2 class="hd-lg"><: l("Layouts") :><a name="content_layouts"></a></h2>
<hr class="hr"/>
<p>We've come up with a few great ways to display content that can be used in instant answers.</p>
- <h3 class="hd-md"><: l("Text Layouts") :></h3>
+ <h3 class="hd-md"><: l("Info Layouts") :></h3>
<p>Used for Wikipedia among many others, this layout should be used when the real focus is that informative block of text. It uses the base styles but has some extra wrapping to display images and responsive magic for mobile and small screens.</p>
<div class="tile--s tile--mid">
<div class="guide-font-reset zci is-active">
- <div class="c-text">
- <div class="c-text__img-wrap c-text__img-wrap--clip">
- <span class="c-text__img-wrap__in"><img class="c-text__img" src="https://duckduckgo.com/i/d4b3d3a2.jpg" alt="duck image" /></span>
+ <div class="c-info">
+ <div class="c-info__img-wrap c-info__img-wrap--clip">
+ <span class="c-info__img-wrap__in"><img class="c-info__img" src="https://duckduckgo.com/i/d4b3d3a2.jpg" alt="duck image" /></span>
</div>
- <div class="c-text__body">
- <h4 class="c-text__title has-sub">Text With Image <span class="c-text__title__sub">Subtitle</span></h4>
- <div class="c-text__content chomp js-ellipsis">Auto-cropped image with a header and subtitle. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</div>
- <div class="c-text__links">
- <span class="c-text__link c-text__link--chomp chomp--link sep--after js-chomp-link can-expand"><i class="chomp--link__icn"></i> <span class="chomp--link__mr">Show More</span><span class="chomp--link__ls">Show Less</span></span><span class="c-text__link">More at DuckDuckGo</span>
+ <div class="c-info__body">
+ <h4 class="c-info__title has-sub">Text With Image <span class="c-info__title__sub">Subtitle</span></h4>
+ <div class="c-info__content chomp js-ellipsis">Auto-cropped image with a header and subtitle. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</div>
+ <div class="c-info__links">
+ <span class="c-info__link c-info__link--chomp chomp--link sep--after js-chomp-link can-expand"><i class="chomp--link__icn"></i> <span class="chomp--link__mr">Show More</span><span class="chomp--link__ls">Show Less</span></span><span class="c-info__link">More at DuckDuckGo</span>
</div>
</div>
</div>
@@ -624,30 +624,30 @@
<div class="is-mobile">
<div class="guide-font-reset zci is-active">
<!--// Don't copy this inline padding - it's only here because we have a fake mobile layout. -->
- <div class="c-text" style="padding-left:1em;padding-right:1em;">
- <div class="c-text__img-wrap c-text__img-wrap--clip">
- <span class="c-text__img-wrap__in"><img class="c-text__img" src="https://duckduckgo.com/i/d4b3d3a2.jpg" alt="duck image" /></span>
+ <div class="c-info" style="padding-left:1em;padding-right:1em;">
+ <div class="c-info__img-wrap c-info__img-wrap--clip">
+ <span class="c-info__img-wrap__in"><img class="c-info__img" src="https://duckduckgo.com/i/d4b3d3a2.jpg" alt="duck image" /></span>
</div>
- <div class="c-text__body">
- <h4 class="c-text__title has-sub">Mobile <span class="c-text__title__sub">Subtitle</span></h4>
- <div class="c-text__content chomp js-ellipsis">Mobile layout with image and subtitle- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</div>
- <div class="c-text__links">
- <span class="c-text__link c-text__link--chomp chomp--link sep--after js-chomp-link can-expand"><i class="chomp--link__icn"></i> <span class="chomp--link__mr">Show More</span><span class="chomp--link__ls">Show Less</span></span><span class="c-text__link">More at DuckDuckGo</span>
+ <div class="c-info__body">
+ <h4 class="c-info__title has-sub">Mobile <span class="c-info__title__sub">Subtitle</span></h4>
+ <div class="c-info__content chomp js-ellipsis">Mobile layout with image and subtitle- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</div>
+ <div class="c-info__links">
+ <span class="c-info__link c-info__link--chomp chomp--link sep--after js-chomp-link can-expand"><i class="chomp--link__icn"></i> <span class="chomp--link__mr">Show More</span><span class="chomp--link__ls">Show Less</span></span><span class="c-info__link">More at DuckDuckGo</span>
</div>
</div>
</div>
</div>
</div>
<div class="guide-font-reset zci is-active">
- <div class="c-text">
- <div class="c-text__img-wrap c-text__img-wrap--tile">
- <span class="c-text__img-wrap__in"><img class="c-text__img" src="/assets/icons/browsers/ddg.png" alt="ddg" /></span>
+ <div class="c-info">
+ <div class="c-info__img-wrap c-info__img-wrap--tile">
+ <span class="c-info__img-wrap__in"><img class="c-info__img" src="/assets/icons/browsers/ddg.png" alt="ddg" /></span>
</div>
- <div class="c-text__body">
- <h4 class="c-text__title">Framed Image</h4>
- <div class="c-text__content chomp js-ellipsis">No subtitle, displaying 4 lines of content now. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</div>
- <div class="c-text__links">
- <span class="c-text__link c-text__link--chomp chomp--link sep--after js-chomp-link can-expand"><i class="chomp--link__icn"></i> <span class="chomp--link__mr">Show More</span><span class="chomp--link__ls">Show Less</span></span><span class="c-text__link">More at DuckDuckGo</span>
+ <div class="c-info__body">
+ <h4 class="c-info__title">Framed Image</h4>
+ <div class="c-info__content chomp js-ellipsis">No subtitle, displaying 4 lines of content now. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</div>
+ <div class="c-info__links">
+ <span class="c-info__link c-info__link--chomp chomp--link sep--after js-chomp-link can-expand"><i class="chomp--link__icn"></i> <span class="chomp--link__mr">Show More</span><span class="chomp--link__ls">Show Less</span></span><span class="c-info__link">More at DuckDuckGo</span>
</div>
</div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.