As in, just a little DIY something you can add to each one of your Pens to brand it and let people know it's one of yours.
I'd bet you already know you could add external resources. Like linking up a JavaScript library, CSS file, or uploading your own asset. You can even link to other Pens as assets, so if you put the URL to another Pen in the CSS or JS asset area, it'll pull the respective code from that Pen.
But you can do that for HTML also!
If you put the URL of a Pen in [[[triple brackets]]] it will pull the HTML from that Pen and put it in place. That's useful for all sorts of stuff. Say you were making three mockups that all needed the same header bar, you could make one Pen for the header bar and import it in all three. Or use it make variations on a theme, like we showed in our introductory blog post.
Another thing people use it for though is CodePen Calling Cards, or little bits of UI you can add to a Pen that essentially brands it for yourself. Doing stuff like linking back to your profile or your own website.
Pete Barr has a whole slide out menu!
You might need to click over an look on a big screen.
See the Pen
Pulsing 3D Typography Thingy by Peter Barr (@petebarr)
on CodePen.
Jack Harner makes a little rocket ship
See the Pen
2019 Pre Signed by Jack Harner (@jackharner)
on CodePen.
Steve Gardner does it with a JavaScript Pen-As-Resource
Like this:
Which adds a little Steve in the bottom right corner:
See the Pen
Droppy woppy input by Steve Gardner (@ste-vg)
on CodePen.
seto89 has a bottom footer
It's not abstracted into an include yet, but it could be!
See the Pen
CSS Pseudo Class concept: :count-of-type()? by seto89 (@seto89)
on CodePen.
The post CodePen Calling Cards appeared first on CodePen Blog.