daily pastebin goal
65%
SHARE
TWEET

Untitled

a guest Dec 10th, 2018 49 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const Article = () => (
  2.     <article className="article">
  3.         <section className="header"><span>📁 Document</span><span className="date">8 Dec 2018</span></section>
  4.         <img alt="article preview" src="static/monkey.jpg" />
  5.         <section className="content">
  6.         <section className="interactions">
  7.             <ul><li>👍 3</li><li>👎 5</li><li>💬 1</li></ul><a href="google.com"><span>📊</span></a>
  8.         </section>
  9.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
  10.         <div className="progress" />
  11.         </section>
  12.         <style jsx>{`
  13.             ul {
  14.                 list-style: none;
  15.                 display: flex;
  16.                 flex-direction: row;
  17.                 align-items: center;
  18.                 margin: 0;
  19.                 padding: 0;
  20.             }
  21.             li {
  22.                 margin-right: 1rem;
  23.             }
  24.             .date {
  25.                color: var(--grey-4);
  26.             }
  27.            .article {
  28.                 display: flex;
  29.                 flex-direction: column;
  30.                 box-shadow: 6px 10px 14px rgba(0,0,0,0.10);
  31.                 background-color: white;
  32.                 border-radius: var(--border-radius);
  33.            }
  34.            span {
  35.                display: block;
  36.            }
  37.            .header {
  38.                display: flex;
  39.                flex-direction: row;
  40.                justify-content: space-between;
  41.                padding: 1.5rem;
  42.                align-items: center;
  43.                line-height: 1.5;
  44.                vertical-align: middle;
  45.            }
  46.            .content {
  47.                padding: 1.5rem;
  48.            }
  49.            img {
  50.                width: 100%;
  51.                max-height: 250px;
  52.                object-fit: cover;
  53.                object-position: 0 0;
  54.            }
  55.            .interactions {
  56.                display: flex;
  57.                flex-direction: row;
  58.                justify-content: space-between;
  59.            }
  60.            p {
  61.                margin: 0;
  62.                padding: 1rem 0;
  63.                line-height: 1.5;
  64.            }
  65.            .progress {
  66.                height: 2px;
  67.                background-color: var(--brand-3);
  68.                width: 80px;
  69.                align-self: flex-start;
  70.                justify-self: flex-start;
  71.            }
  72.         `}</style>
  73.     </article>
  74. )
  75.  
  76. export default Article;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top