Typography

The standard font DesignUp uses is Open Sans. We have included the font files with our framework. We bundle our framework with the latest iteration of Open Sans Google has released. It comes with 5 different font weights you can use: 300, 400, 500, 600, 800.

Headings

h1. Designup email heading

<h1 class="email">h1. Designup email heading</h1>
<h2 class="email">h2. Designup email heading</h2>

Bodytext

<p class="email">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p class="email">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>

Title

<h2 class="email-title-1">
  Desigup email title
</h2>

Subtitles

<div class="email-subtitle-1">
  Desigup email subtitle 1
</div>
<div class="email-subtitle-2">
  Desigup email subtitle 2
</div>

Buttons

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

Default button

<a class="email-button-1" href="#">
  DEFAULT BUTTON
</a>

Lists

The broken display of lists is intentional as DesignUp globally resets these elements for the time being.

Users

<a class="email-button-1" href="#">
  DEFAULT BUTTON
</a>

Player

<ul class="email-player">
  <li class="track">
    <div class="avatar">
      <img src="#" alt="" height="53" />
    </div>
    <div class="info">
      <span class="track-name">
        Sound of Melodies
      </span>
      <br/>
      <span class="track-artits">
        Leeland
      </span>
    </div>
  </li>
  ...
</ul>

Utilities

There are a handful of utilities in DesignUp for quick behaviors, floats, colors, alignment, and more.

Header

<div class="email-header">
  <img src="#" alt="MusicUp" height="30"/>
</div>

Floats

left right
<span class="badge left">
  left
</span>
<span class="badge right">
  right
</span>

Text Alignment

text left

text center

text right

<p class="text-left">
  text left
</p>
<p class="text-center">
  text center
</p>
<p class="text-right">
  text right
</p>

Banners

Banners are too usefull for email marketing, Designup uses a total width about the container for the banners size.

Default banner

<img class="email-banner" src="#" alt="banner" />

Templates

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Template 1

<div class="email-container">
  <div class="email-boxed">
    <h1 class="email">
      Hi friend!
    </h1>
    <div class="email-banner">
      <img src="images/banner-1.png" alt="Banner" />
    </div>
    <p class="email">
      This means you'll be able to enjoy all the benefits of MusicUp Premium, while keeping your account and playlists separate.
    </p>
    <p class="email">
      Please visit <a class="font-semi-bold" href="javascript:void(0)">this page</a> to log in, or sign up to MusicUp and then upgrade your account to Premium.
    </p>
    <ul class="email-player">
      <li class="track">
        <div class="avatar">
          <img src="#; alt="" height="53" />
        </div>
        <div class="info">
          <span class="track-name">
            Sound of Melodies
          </span>
          <br/>
          <span class="track-artits">
            Leeland
          </span>
        </div>
      </li>
      ...
    </ul>
    <p>
      <a class="email-button-1" href="#">ACCEPT INVITACION</a>
    </p>
  </div>
</div>

Template 2

<div class="email-container">
  <div class="email-boxed">
    <div class="email-subtitle-1">
      Someone sent you a notification
    </div>
    <h2 class="email-title-1">
      Jahdiel sent you a request
    </h2>
    <ul class="email-users">
      <li class="user">
        <div class="avatar">
          <img src="#" alt="" height="53" />
        </div>
        <div class="info">
          <span class="user-name">
            Jahdiel Santander
          </span>
          <br/>
          <span class="user-nickname">
            @GoJahdyy
          </span>
        </div>
      </li>
    </ul>
    <p class="email">
      Hi <span class="font-semi-bold">Alison!</span> I would like to be a member of your Player because I like too much your musical preferences. Please click in the button bellow to accept.
    </p>
    <p class="email">
      <a href="#"></a>
    </p>
    <p class="email">
      <a class="email-button-1" href="#">ACCEPT</a>
    </p>
  </div>
</div>

Template 3

<div class="email-container">
  <div class="email-boxed">
    <h1 class="email">
      Creative Music 2017
    </h1>
    <p class="email">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div class="email-banner">
      <img src="#" alt="Banner" />
    </div>
    <h2 class="email">
      Creative North 2017 Overview
    </h2>
    <p class="email">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in.
    </p>
    <p class="text-center">
      <a class="email-button-1" href="#)">ACCEPT INVITACION</a>
    </p>
  </div>
</div>

Template 4

<div class="email-container">
  <div class="email-boxed">
    <div class="email-banner">
      <img src="#" alt="Banner" />
    </div>
    <p class="email">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
    </p>
    <p class="email">
      Lboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.
    </p>
    <p class="email">
      Duis aute irure dolor in reprehenderit.
    </p>
    <p class="text-center">
      <a class="email-button-1" href="#">LISTEN TO MUSIC!</a>
    </p>
    <p class="text-center email-subtitle-2">
      (Hurry! Limited time offer.)
    </p>
  </div>
</div>