Making a simple author byline for your website

Why would you want an author byline on your website

The main reason you would want to add an author byline to your site is to give credit where credit is due, and by this, I mean giving information about the author of the post or article.

The HTML for this author byline example contains a rel="author" attribute to help with the SEO of the page.

HTML

<div class="author">
    <img
        class="author__item author__pic"
        src="https://en.gravatar.com/userimage/137371786/7395c6c605915c6315f96d8cd8f6ada9.jpg?size=200"
        alt="my face"
    />
    <div class="author__item author__name">
        <span><b class="author__heading">Author:</b></span
        ><br />
        <span
            ><a class="author__link" rel="author" href="//brettanda.ca" target="_blank"
                >Brett Anda</a
            ></span
        >
    </div>
    <div class="author__item author__date">
        <span><b class="author__heading">Date Posted:</b></span
        ><br />
        <span>Today</span>
    </div>
</div>

SCSS

.author {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

    @media all and (max-width: 600px) {
        flex-flow: column nowrap;
        text-align: center;
    }
}

.author__item {
    flex: 0 1 8rem;
    margin: 1rem;

    @media all and (max-width: 600px) {
        flex: 1 1 3rem;
        margin: 0.5rem;
    }
}

.author__pic {
    flex-shrink: 0;
    flex-basis: 8rem;
    object-fit: cover;
    object-position: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    padding: 0.3rem;
    border: 2px solid rgba(0, 0, 0, 0.5);
}

.author__heading {
    font-size: 90%;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.author__link {
    text-decoration: none;
    color: blue;

    &:hover,
    &:focus {
        text-decoration: underline;
    }
}

There is no javascript needed for this example

Codepen example

If you want to see this in example in action here is a Codepen I made for it.

See the Pen Author byline example by Brett
(@brettanda) on CodePen.