DEV Community

Cover image for Making a simple author byline for your website
Brett Anda ๐Ÿ”ฅ๐Ÿง  for Developer Bacon ๐Ÿฅ“๐Ÿฅ“

Posted on • Originally published at developerbacon.ca on

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)