Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <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>
!

CSS 

              
                body {
  font-family: Karla;
  -webkit-font-smoothing: antialiased;
}

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

.Card-head {
  background: #505cf0;
  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;
}
!

JS
!
999px

Console