css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="Card">
  <div class="Card-head">
    <svg width="321px" height="35px" viewBox="0 0 321 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Story" transform="translate(-40.000000, -50.000000)" fill="#FFFFFF">
          <path d="M58.7054516,72.3391304 L65.924303,84.257971 C66.1513109,84.6753623 65.8334999,85 65.4248856,85 L55.7089472,85 C55.2549314,85 54.8463171,84.6753623 54.6647108,84.257971 L49.9429463,74.1478261 L49.3981274,74.1478261 L49.3981274,84.3507246 C49.3981274,84.6753623 49.0803163,85 48.6717021,85 L40.6810237,85 C40.3178111,85 40,84.6753623 40,84.3507246 L40,53.6956522 C40,53.3246377 40.3178111,53 40.6810237,53 L52.6670412,53 C59.6588848,53 64.2898461,57.173913 64.2898461,63.4811594 C64.2898461,67.1449275 62.1105702,70.8550725 58.7054516,72.3391304 Z M49,66 L51.5431034,66 C53.0086207,66 54,65.009434 54,63.5 C54,61.990566 53.0086207,61 51.5431034,61 L49,61 L49,66 Z M88.0288809,76.2435233 L89.9693141,81.8117444 C90.0595668,82.1260794 89.9693141,82.3056995 89.6534296,82.4853195 C87.2617329,84.0569948 83.7870036,85 80.3122744,85 C72.3249097,85 67,79.791019 67,72.0224525 C67,64.208981 72.234657,59 80.0866426,59 C87.5776173,59 92,63.8048359 92,71.9775475 C92,72.6511226 91.9548736,73.3246978 91.8194946,73.9982729 C91.7743682,74.357513 91.5487365,74.537133 91.1425993,74.537133 L76.6570397,74.537133 C76.6570397,74.537133 76.6570397,77.3661485 80.4476534,77.3661485 C82.7490975,77.3661485 85.3212996,76.8272884 87.3519856,75.8842832 C87.66787,75.7495682 87.9386282,75.9291883 88.0288809,76.2435233 Z M77,70 L83,70 C83,68.1917808 81.8591549,67 80.1690141,67 C78.2676056,67 77,68.1917808 77,70 Z M101.37072,60.106383 L101.953955,61.5815603 C103.38961,59.9680851 105.991736,59 108.997639,59 C112.227863,59 114.695396,60.3368794 115.682409,62.641844 C117.432113,60.3368794 120.303424,59 123.44392,59 C129.455726,59 133,62.7801418 133,69.141844 L133,84.3546099 C133,84.7695035 132.775679,85 132.371901,85 L124.386068,85 C123.98229,85 123.757969,84.7695035 123.757969,84.3546099 L123.757969,70.5248227 C123.668241,68.6808511 122.905549,67.6205674 121.559622,67.6205674 C119.002361,67.6205674 118.598583,70.2021277 118.643447,70.2021277 L118.643447,84.3546099 C118.643447,84.7695035 118.419126,85 118.015348,85 L110.029516,85 C109.625738,85 109.401417,84.7695035 109.401417,84.3546099 L109.401417,70.5248227 C109.401417,68.5425532 108.548996,67.6205674 107.20307,67.6205674 C104.645809,67.6205674 104.242031,70.2021277 104.242031,70.2021277 L104.242031,84.3546099 C104.242031,84.7695035 104.01771,85 103.613932,85 L95.6280992,85 C95.2243211,85 95,84.7695035 95,84.3546099 L95,60.2907801 C95,59.8758865 95.2243211,59.6453901 95.6280992,59.6453901 L100.652893,59.6453901 C100.966942,59.6453901 101.236128,59.7836879 101.37072,60.106383 Z M148.5,59 C156.581633,59 162,64.208981 162,71.9775475 C162,79.791019 156.581633,85 148.5,85 C140.418367,85 135,79.791019 135,72.0224525 C135,64.208981 140.418367,59 148.5,59 Z M148.5,67 C145.818182,67 144,69.0091324 144,72.0228311 C144,74.9908676 145.818182,77 148.5,77 C151.181818,77 153,74.9908676 153,71.9771689 C153,69.0091324 151.181818,67 148.5,67 Z M175.831063,59.4959003 L179.305177,59.4959003 C179.722071,59.4959003 180,59.7741269 180,60.1450956 L179.490463,64.6430914 C179.444142,65.0140601 179.166213,65.3386577 178.79564,65.3386577 L175.831063,65.3386577 L175.831063,84.3044336 C175.831063,84.6754024 175.506812,85 175.13624,85 L166.983651,85 C166.613079,85 166.288828,84.6754024 166.288828,84.3044336 L166.288828,65.3386577 L163.648501,65.3386577 C163.324251,65.3386577 163,65.0604312 163,64.6894624 L163,60.1914667 C163,59.7741269 163.324251,59.4959003 163.648501,59.4959003 L166.288828,59.4959003 L166.288828,54.4414515 C166.288828,54.1168539 166.613079,53.8386273 166.983651,53.7922562 L175.13624,53.0039477 C175.506812,52.9575766 175.831063,53.3285453 175.831063,53.653143 L175.831063,59.4959003 Z M202.028881,76.2435233 L203.969314,81.8117444 C204.059567,82.1260794 203.969314,82.3056995 203.65343,82.4853195 C201.261733,84.0569948 197.787004,85 194.312274,85 C186.32491,85 181,79.791019 181,72.0224525 C181,64.208981 186.234657,59 194.086643,59 C201.577617,59 206,63.8048359 206,71.9775475 C206,72.6511226 205.954874,73.3246978 205.819495,73.9982729 C205.774368,74.357513 205.548736,74.537133 205.142599,74.537133 L190.65704,74.537133 C190.65704,74.537133 190.65704,77.3661485 194.447653,77.3661485 C196.749097,77.3661485 199.3213,76.8272884 201.351986,75.8842832 C201.66787,75.7495682 201.938628,75.9291883 202.028881,76.2435233 Z M191,70 L197,70 C197,68.1917808 195.859155,67 194.169014,67 C192.267606,67 191,68.1917808 191,70 Z M214.355556,81.15 L217.155556,74.6875 C217.288889,74.2291667 217.6,74.0916667 217.955556,74.3208333 C220,75.5125 222.444444,76.3833333 224.133333,76.5208333 C225.555556,76.5208333 226.488889,75.8333333 226.488889,74.7791667 C226.488889,72.075 214,72.2125 214,62.2208333 C214,56.0791667 218.488889,52 225.244444,52 C228.4,52 232.4,53.3291667 235.2,55.3 C235.555556,55.5291667 235.688889,55.8958333 235.555556,56.125 L232.755556,62.5875 C232.622222,63.0458333 232.311111,63.1833333 231.955556,62.9541667 C229.777778,61.6708333 227.244444,60.7083333 225.688889,60.5708333 C224.311111,60.5708333 223.422222,61.2125 223.422222,62.2208333 C223.422222,64.925 236,64.7416667 236,74.825 C236,80.9208333 231.422222,85 224.577778,85 C220.844444,85 216.933333,83.8083333 214.711111,81.975 C214.355556,81.7 214.222222,81.3791667 214.355556,81.15 Z M249.831063,59.4959003 L253.305177,59.4959003 C253.722071,59.4959003 254,59.7741269 254,60.1450956 L253.490463,64.6430914 C253.444142,65.0140601 253.166213,65.3386577 252.79564,65.3386577 L249.831063,65.3386577 L249.831063,84.3044336 C249.831063,84.6754024 249.506812,85 249.13624,85 L240.983651,85 C240.613079,85 240.288828,84.6754024 240.288828,84.3044336 L240.288828,65.3386577 L237.648501,65.3386577 C237.324251,65.3386577 237,65.0604312 237,64.6894624 L237,60.1914667 C237,59.7741269 237.324251,59.4959003 237.648501,59.4959003 L240.288828,59.4959003 L240.288828,54.4414515 C240.288828,54.1168539 240.613079,53.8386273 240.983651,53.7922562 L249.13624,53.0039477 C249.506812,52.9575766 249.831063,53.3285453 249.831063,53.653143 L249.831063,59.4959003 Z M268.5,59 C276.581633,59 282,64.208981 282,71.9775475 C282,79.791019 276.581633,85 268.5,85 C260.418367,85 255,79.791019 255,72.0224525 C255,64.208981 260.418367,59 268.5,59 Z M268.5,67 C265.818182,67 264,69.0091324 264,72.0228311 C264,74.9908676 265.818182,77 268.5,77 C271.181818,77 273,74.9908676 273,71.9771689 C273,69.0091324 271.181818,67 268.5,67 Z M298.187311,60 L299.365559,60 C299.728097,60 300,60.2727273 300,60.6363636 L300,66.5454545 C300,66.9090909 299.728097,67.1818182 299.365559,67.1818182 L298.187311,67.1818182 C296.465257,67.1818182 294.924471,67.9545455 294.335347,69.0909091 L294.335347,84.3181818 C294.335347,84.6818182 294.018127,85 293.655589,85 L285.679758,85 C285.317221,85 285,84.6818182 285,84.3181818 L285,60.6818182 C285,60.3636364 285.317221,60.0454545 285.679758,60.0454545 L290.800604,60.0454545 C291.163142,60.0454545 291.389728,60.3636364 291.52568,60.7272727 L292.205438,62.7272727 C293.564955,61.0454545 295.785498,60 298.187311,60 Z M307,50 C310,50 312,51.8267327 312,54.5891089 C312,57.2178218 310,59 307,59 C304,59 302,57.2178218 302,54.5891089 C302,51.8267327 304,50 307,50 Z M303.65534,60 L311.34466,60 C311.694175,60 312,60.3181818 312,60.6363636 L312,84.3181818 C312,84.6818182 311.694175,85 311.34466,85 L303.65534,85 C303.305825,85 303,84.6818182 303,84.3181818 L303,60.6363636 C303,60.3181818 303.305825,60 303.65534,60 Z M335.028881,76.2435233 L336.969314,81.8117444 C337.059567,82.1260794 336.969314,82.3056995 336.65343,82.4853195 C334.261733,84.0569948 330.787004,85 327.312274,85 C319.32491,85 314,79.791019 314,72.0224525 C314,64.208981 319.234657,59 327.086643,59 C334.577617,59 339,63.8048359 339,71.9775475 C339,72.6511226 338.954874,73.3246978 338.819495,73.9982729 C338.774368,74.357513 338.548736,74.537133 338.142599,74.537133 L323.65704,74.537133 C323.65704,74.537133 323.65704,77.3661485 327.447653,77.3661485 C329.749097,77.3661485 332.3213,76.8272884 334.351986,75.8842832 C334.66787,75.7495682 334.938628,75.9291883 335.028881,76.2435233 Z M324,70 L330,70 C330,68.1917808 328.859155,67 327.169014,67 C325.267606,67 324,68.1917808 324,70 Z M341.230415,81.7219344 L343.580645,76.5129534 C343.672811,76.2435233 343.949309,76.1986183 344.179724,76.3333333 C345.976959,77.3661485 347.912442,78.1744387 349.479263,78.1744387 C350.447005,78.2642487 351.092166,77.7253886 351.092166,77.0518135 C351.092166,74.761658 341,75.4801382 341,67.0379965 C341,62.2331606 345.193548,59 351.460829,59 C354.456221,59 358.050691,60.0328152 360.493088,61.5595855 C360.723502,61.7392055 360.861751,61.9637306 360.769585,62.1882556 L358.419355,67.4870466 C358.327189,67.7564767 358.050691,67.8013817 357.820276,67.6666667 C356.023041,66.5440415 354.087558,65.8255613 352.520737,65.8255613 C351.552995,65.7357513 350.907834,66.1848014 350.907834,66.9032815 C350.907834,69.283247 361,68.4300518 361,76.9620035 C361,81.7668394 356.9447,85 350.815668,85 C347.820276,85 344.087558,83.9671848 341.506912,82.4404145 C341.276498,82.2158895 341.138249,81.9913644 341.230415,81.7219344 Z" id="Remote-Stories"></path>
        </g>
    </g>
    </svg>
  </div>

  <div class="Card-body">
    <p>Pro: Having a lot of freedom and dictating your own hours.
    Con: Having to work on a Saturday because you spent Wednesday watching a squirrel documentary.
    </p>
  </div>
</div>
            
          
!
            
              body {
  font-family: Karla;
}

.Card {
  display: flex;
  flex-flow: column nowrap;
  min-height: 280px;
  width: 540px;
}

.Card-head {
  background: #5c69ff;
  flex: 0 0 auto;
  padding: 25px 20px;
}

.Card-head svg {
  display: block;
  height: auto;
  width: 160px;
}

.Card-body {
  background: #333b95;
  flex: 1 1 auto;
  padding: 20px;
}

.Card-body p {
  color: #fff;
  display: -webkit-box;
  font-size: 25px;
  margin: 0;
  overflow: hidden;
  white-space: pre-line;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console