Bylines

Bylines present the author of a document.

Bylines can have up to four different elements inside it: the author’s photo, author’s name, author’s title or designation, and the indicator (e.g. written by, published by, created by).

If the byline component is placed inside an <article> element, it represents the author of that <article> element. Otherwise, it represents the author of the whole page.

Minimal Byline

<div class="byline">
    <div class="byline__body">
        <a href="/link/to/author/information/page" class="byline__name" rel="author">Francis Rubio</a>
    </div>
</div>

Notice how we added the attribute rel="author. This is important if we want to indicate that this is the author’s name. The URL placed inside the href attribute should point to a page with the author’s information. If there’s no link for the author, you should use the <address> element instead of the <a> element.

Francis Rubio
<div class="byline">
    <div class="byline__body">
        <address class="byline__name">Francis Rubio</address>
    </div>
</div>

Byline with photo

Francis Rubio 
<div class="byline">
    <img
        class="byline__image"
        src="https://www.gravatar.com/avatar/821268102c1c7397c7ee4fc3ecb2cb6a?s=400" 
        alt="Francis Rubio"
        width="400"
        height="400">
    <div class="byline__body">
        <a href="/link/to/author/information/page" class="byline__name" rel="author">Francis Rubio</a>
    </div>
</div>

Byline with designation

Francis Rubio
Web developer, designer, and educator 
<div class="byline">
    <img
        class="byline__image"
        src="https://www.gravatar.com/avatar/821268102c1c7397c7ee4fc3ecb2cb6a?s=400" 
        alt="Francis Rubio"
        width="400"
        height="400">
    <div class="byline__body">
        <a href="/link/to/author/information/page" class="large byline__name" rel="author">Francis Rubio</a>
        <span class="byline__label">Web developer, designer, and educator</span>
    </div>
</div>

Byline with indicator

Francis Rubio
Written by 
<div class="byline">
    <img
        class="byline__image"
        src="https://www.gravatar.com/avatar/821268102c1c7397c7ee4fc3ecb2cb6a?s=400" 
        alt="Francis Rubio"
        width="400"
        height="400">
    <div class="byline__body">
        <span class="small byline__label">Written by</span>
        <a href="/link/to/author/information/page" class="large byline__name" rel="author">Francis Rubio</a>
    </div>
</div>

Byline with indicator and designation

Francis Rubio
Written by Web developer, designer, and educator 
<div class="large byline">
    <img
        class="byline__image"
        src="https://www.gravatar.com/avatar/821268102c1c7397c7ee4fc3ecb2cb6a?s=400" 
        alt="Francis Rubio"
        width="400"
        height="400">
    <div class="byline__body">
        <span class="small byline__label">Written by</span>
        <a href="/link/to/author/information/page" class="large byline__name" rel="author">Francis Rubio</a>
        <span class="small byline__label">Web developer, designer, and educator</span>
    </div>
</div>