Director<p>(resize the screen horizontally)</p> <br>
<user-card>
<picture class='avatar'>
<img src='https://sheriffderek.consulting/resources/social/insignia/512.png'>
</picture>
<section class='info'>
<h1 class='name'>Derek Wood</h1>
<h2 class='position'>Director @ Perpetual Education</h2>
</section>
<footer class='actions'> <!-- might be many! -->
<a class='link' href='https://sheriffderek.consulting' target='sh'>
<span>Say hi!</span>
</a>
</footer>
</user-card>
<!-- probably would just make an element called <actions> -->
<!-- it depends if you are in favor of 1 footer element only per site or not -->
<!-- we can debate the markup -->
/* reset ^ included in cog */
/* variables mixins included from another pen to show this as a stand alone component */
user-card
display: block // custom elements are 'inline' by default
display: flex //
flex-direction: column
align-items: flex-start
padding: $pad
.avatar
max-width: 80px
circle()
.name
calm-voice()
margin-top: $pad*.5
.position
micro-copy()
margin-top: $pad*.5
.actions
display: flex
margin-top: $pad
@media (max-width: 399px)
.link
standard-button()
@media (min-width: 400px)
roundy-corners()
drop-shadow()
max-width: 400px /* should be decided by parent */
display: grid
/* or whatever - just for fun */
grid-template-areas:
"visual info info info info"\
"visual actions actions actions actions";
// this isn't great ^ haha
// but you get the point
.avatar
grid-area: visual
.info
grid-area: info
.actions
grid-area: actions
.link
micro-copy()
color: blue
text-decoration: underline
p
opacity: .6
View Compiled
new Vue({
el: '#context',
});