Skip to content
This repository has been archived by the owner on Oct 15, 2022. It is now read-only.

Commit

Permalink
renaming the 'text' content layout to 'info' to make it more consiste…
Browse files Browse the repository at this point in the history 
…nt with internal template names
  • Loading branch information
Doug Brown committed Apr 24, 2015
1 parent 56e8494 commit 455bfd2
Showing 1 changed file with 25 additions and 25 deletions.
50 changes: 25 additions & 25 deletions share/site/duckduckgo/styleguide.tx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -604,50 +604,50 @@
<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>
</div>
<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>
Expand Down

0 comments on commit 455bfd2

Please sign in to comment.