WordPress Component Library
10up Engineering

Author Card

The author bio component is a dual-purpose component in that it provides a common layout for authoring information within a blog post or article and it also gives us a specialized schema markup pattern so the content is more machine-readable. When modifying this component you should feel free to use any HTML that fits the structure and hierarchy of your project, while maintaining any of the schema-related HTML attributes (itemscope, itemtype, itemprop, etc.).

HTML View Generated HTML

<!-- Scoping this inside "creative work" so we can use the author schema, which feels better-->
<section itemscope itemtype="https://schema.org/CreativeWork">
	<div class="author-card" itemprop="author" itemscope itemtype="http://schema.org/Person">

		<?php
			$author_id      = get_the_author_meta( 'ID' );
			$avatar_url_sm  = get_avatar_url( $author_id, array( 'size' => 96 ) );
			$avatar_url_lrg = get_avatar_url( $author_id, array( 'size' => 192 ) );
		?>

		<?php if ( $avatar_url_sm ) : ?>
		<div class="author-card-pic">
			<img
				itemprop="image"
				src="<?php echo esc_url( $avatar_url_sm ); ?>"
				srcset="<?php echo esc_url( $avatar_url_sm ); ?> 1x, <?php echo esc_url( $avatar_url_lrg ); ?> 2x"
				alt="Image of <?php echo esc_attr( get_the_author_meta( 'display_name' ) ); ?>"
			>
		</div> <!-- /.author-card-pic -->
		<?php endif; ?>

		<div class="author-card-info">
			<h2 class="author-card-author">
				<a rel="author" href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>" itemprop="url">
					<span itemprop="name">
						<?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?>
					</span>
				</a>
			</h2>
			<?php if ( get_the_author_meta( 'description' ) ) : ?>
				<div class="author-card-bio" itemprop="description">
					<p><?php echo esc_html( get_the_author_meta( 'description' ) ); ?></p>
				</div> <!-- /.author-card-bio -->
			<?php endif; ?>
		</div> <!-- /.author-card-info -->

	</div> <!-- /.author-card -->
</section><!--/itemtype=CreativeWork-->
<!-- Scoping this inside "creative work" so we can use the author schema, which feels better -->
<section itemscope itemtype="https://schema.org/CreativeWork">

	<div class="author-card" itemprop="author" itemscope itemtype="http://schema.org/Person">

		<div class="author-card-pic">

			<img itemprop="image" src="https://placehold.it/100x100" srcset="https://placehold.it/100x100 1x, https://placehold.it/200x200 2x" alt="placeholder image">

		</div> <!-- /.author-card-pic -->

		<div class="author-card-info">

			<h2 class="author-card-author">
				<a rel="author" href="#!" itemprop="url">
					<span itemprop="name">Bill Murray</span>
				</a>
			</h2>

			<div class="author-card-bio" itemprop="description">

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cave putes quicquam esse verius. Si quidem, inquit, tollerem, sed relinquo. Haec para/doca illi, nos admirabilia dicamus. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Idem iste, inquam, de volbsolutam.</p>

			</div> <!-- /.author-card-bio -->
		</div> <!-- /.author-card-info -->

	</div> <!-- /.author-card -->

</section><!--/itemtype=CreativeWork-->

SCSS Download SCSS

// Breakpoints
$bp-small:          40.625em !default;      // 650px
$bp-medium:         53.125em !default;      // 850px
$bp-large:          62.5em !default;        // 1000px

// Component Sass
.author-card {
	margin: auto;
	max-width: 650px;
	overflow: hidden;
	padding: .5em;

	@media screen and ( min-width: $bp-small ) {
		padding: 1em;
	}

	&-author {
		margin: 0;
	}

	&-info {

		@media screen and ( min-width: $bp-small ) {
			display: inline-block;
			float: right;
			width: calc(100% - 120px);
		}

	}

	&-pic {
		padding-bottom: .5em;
		text-align: center;

		@media screen and ( min-width: $bp-small ) {
			display: inline-block;
			max-width: 100px;
			padding-bottom: 1em;
		}

		img {
			border-radius: 50%;
		}
	}

} // .author-card

Resources