deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-08 00:42:20 +02:00
Code Issues Projects Releases Wiki Activity

article component

Browse source
This commit is contained in:
Ilham Wibawa 2017-11-24 14:56:46 +07:00
parent 29efe4a06e
commit 70811b40eb
3 changed files with 69 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
index.html
View file

@ -63,6 +63,7 @@
<li><a href="#utilities">Utilities</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#article">Article</a></li>
</ul>
</div>
@ -1076,6 +1077,47 @@ function add(x, y) {
&lt;/div&gt;</pre>
</div>
</div>
<div id="article" class="section">
<h2>Article</h2>
<article class="article">
<h1 class="article-title"><a href="">Article Title</a></h1>
<p class="article-meta">Written by <a href="#">Super User</a> on 24 November 2017. Posted in <a href="#">Blog</a></p>
<p class="text-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur repellendus excepturi, consequatur illo rerum, non sint asperiores dolore sapiente, vitae blanditiis. Officiis at quaerat modi earum, fugiat magni impedit, aperiam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?</p>
<div class="row">
<button>Read More</button>
<button>5 Comments</button>
</div>
</article>
<div class="docs">
<pre>
&lt;article class="article"&gt;
&lt;h1 class="article-title"&gt;&lt;a href=""&gt;Article Title&lt;/a&gt;&lt;/h1&gt;
&lt;p class="article-meta"&gt;Written by &lt;a href="#"&gt;Super User&lt;/a&gt;&lt;/p&gt;
&lt;p class="text-lead"&gt; Lorem... &lt;/p&gt;
&lt;p&gt;Lorem...&lt;/p&gt;
&lt;div class="row"&gt;
&lt;button&gt;Read More&lt;/button&gt;
&lt;button&gt;5 Comments&lt;/button&gt;
&lt;/div&gt;
&lt;/article&gt;
</pre>
</div>
</div>
<div class="section">
<h2 id="download">Download and Link</h2>
<h4>Download</h4>

26
src/article.less Normal file
View file

@ -0,0 +1,26 @@
article {
.article-title {
font-size: 3rem;
}
.article-meta {
font-size: 15px;
color: @muted;
a {
color: @muted-text;
background-image: none;
&:hover {
color: #000;
}
}
}
.text-lead {
font-size: 30px;
line-height: 1.3;
margin: 35px 0px;
}
}

1
src/styles.less
View file

@ -17,3 +17,4 @@
@import (less) "./cards.less";
@import (less) "./badges.less";
@import (less) "./alerts.less";
@import (less) "./article.less";