Links

Text Link

Vocabulary

Text Link, Link

Syntax

Text links are used in-line, within a paragraph or line of text. Article lists and callouts use text links.

Semantics

Text links are used for linking to additional external content. Use them when the text should fit in line with the content, and not be as prominent as a button.

HTML

<a href="https://teamtreehouse.com" class="esg-link esg-link-blue" target="_blank">Treehouse</a> is an online school that teaches you code.
<a href="https://www.teamtreehouse.com" class="esg-link esg-link-gray" target="_blank">Treehouse</a> is an online school that teaches you code.

Button

Vocabulary

Button

Syntax

The solid green button is the default, and it can be centered or left aligned. Note: If adding to a multi-column layout, you'll need to add colspan="" (add the number of columns you want the button to span in those quotes)

Semantics

Use the button for primary actions. It makes the Call to Actions (CTA) stand out more than a text link.

HTML

<!-- // Container Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
  <tr>
    <td class="esg-button-container esg-button-container-green">
      <a href="https://teamtreehouse.com" class="esg-button esg-button-green" target="_blank">
        <span class="esg-button-text-green esg-button-text">Button Text</span>
      </a>
    </td>
  </tr>
</table>
<!-- // End Container Button -->
Do

Do - Use brand green for primary buttons

Do
Don't

Don't - Use topic colors for buttons

Don't