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&nbsp;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',
	
	
});

External CSS

  1. https://codepen.io/sheriffderek/pen/7cdbde40fb6db371b3919e91c70db1a0.stylus

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js