WOHASU Style Guide

WOHASU® Style Guide

Headers
  • Heading 1 – <h1>

    Sample code: <h1>Header Text</h1>

  • Heading 2 – <h2>

    Sample code: <h2>Header Text</h2>

  • Heading 3 – <h3>

    Sample code: <h3>Header Text</h3>

  • Heading 4 – <h4>

    Sample code: <h4>Header Text</h4>

  • Heading 5 – <h5>

    Sample code: <h5>Header Text</h5>

  • Heading 6 – <h6>

    Sample code: <h6>Header Text</h6>

Paragraph

This is a sample paragraph in default font-family Lato and font-size 16px

  • Font Size 18px

    Sample code: <p style=”font-size:18px;” >Text here </p>

  • Font Size 22px

    Sample code: <p style=”font-size:22px;” >Text here </p>

  • Font Size 24px

    Sample code: <p style=”font-size:24px;” >Text here </p>

  • Font Size 26px

    Sample code: <p style=”font-size:26px;” >Text here </p>

  • Font Size 28px

    Sample code: <p style=”font-size:28px;” >Text here </p>

Quote

This is a sample quote in default font-family Lato Italic and font-size 16px

    • Quotes 16px

      Sample code: <blockquote style=”font-size:16px;font-family:’Lato’;font-style:italic;” >Text here </blockquote>

      This is the default quote style of the theme.

      This is a sample quote

      To override this style you may refer to the sample code and attach and inline css style in the tag.

      Sample code: <p style=”font-size:16px;font-family:’Lato’;font-style:italic;”>”Text here”</p>

Colors
  • Wohasu pink #E50055

    Sample code: <p style=”color:#E50055;” >Text here </p>

  • Wohasu Green #a0d523

    Sample code: <p style=”color:#a0d523;” >Text here </p>

<div style=”font-size: 36px; font-family: ‘Lato’; font-weight: bold;”>Headers</div>
<ul style=”color: #666666;”>
<li style=”margin-left: 10px;”>
<h1>Heading 1 – &lt;h1&gt;</h1>
Sample code: &lt;h1&gt;Header Text&lt;/h1&gt;</li>
<li style=”margin-left: 10px;”>
<h2>Heading 2 – &lt;h2&gt;</h2>
Sample code: &lt;h2&gt;Header Text&lt;/h2&gt;</li>
<li style=”margin-left: 10px;”>
<h3>Heading 3 – &lt;h3&gt;</h3>
Sample code: &lt;h3&gt;Header Text&lt;/h3&gt;</li>
<li style=”margin-left: 10px;”>
<h4>Heading 4 – &lt;h4&gt;</h4>
Sample code: &lt;h4&gt;Header Text&lt;/h4&gt;</li>
<li style=”margin-left: 10px;”>
<h5>Heading 5 – &lt;h5&gt;</h5>
Sample code: &lt;h5&gt;Header Text&lt;/h5&gt;</li>
<li style=”margin-left: 10px;”>
<h6>Heading 6 – &lt;h6&gt;</h6>
Sample code: &lt;h6&gt;Header Text&lt;/h6&gt;</li>
</ul>
<div style=”font-size: 36px; font-family: ‘Lato’; font-weight: bold;”>Paragraph</div>
<p style=”font-size: 16px;”>This is a sample paragraph in default font-family Lato and font-size 16px</p>

<ul style=”color: #666666;”>
<li style=”font-size: 18px; margin-left: 10px;”>Font Size 18px
<p style=”font-size: 16px;”>Sample code: &lt;p style=”font-size:18px;” &gt;Text here &lt;/p&gt;</p>
</li>
<li style=”font-size: 22px; margin-left: 10px;”>Font Size 22px
<p style=”font-size: 16px;”>Sample code: &lt;p style=”font-size:22px;” &gt;Text here &lt;/p&gt;</p>
</li>
<li style=”font-size: 24px; margin-left: 10px;”>Font Size 24px
<p style=”font-size: 16px;”>Sample code: &lt;p style=”font-size:24px;” &gt;Text here &lt;/p&gt;</p>
</li>
<li style=”font-size: 26px; margin-left: 10px;”>Font Size 26px
<p style=”font-size: 16px;”>Sample code: &lt;p style=”font-size:26px;” &gt;Text here &lt;/p&gt;</p>
</li>
<li style=”font-size: 28px; margin-left: 10px;”>Font Size 28px
<p style=”font-size: 16px;”>Sample code: &lt;p style=”font-size:28px;” &gt;Text here &lt;/p&gt;</p>
</li>
</ul>
<div style=”font-size: 36px; font-family: ‘Lato’; font-weight: bold;”>Quote</div>
<p style=”font-size: 16px;”>This is a sample quote in default font-family Lato Italic and font-size 16px</p>

<ul style=”color: #666666;”>
<li style=”list-style-type: none;”>
<ul style=”color: #666666;”>
<li style=”font-size: 16px; margin-left: 10px;”>Quotes 16px
<p style=”font-size: 16px;”>Sample code: &lt;blockquote style=”font-size:16px;font-family:’Lato’;font-style:italic;” &gt;Text here &lt;/blockquote&gt;</p>
This is the default quote style of the theme.
<blockquote style=”font-family: ‘Lato’; font-style: italic; font-size: 16px;”>This is a sample quote</blockquote>
To override this style you may refer to the sample code and attach and inline css style in the tag.
<p style=”font-size: 16px; font-style: italic;”>Sample code: &lt;p style=”font-size:16px;font-family:’Lato’;font-style:italic;”&gt;”Text here”&lt;/p&gt;</p>
</li>
</ul>
</li>
</ul>
<div style=”font-size: 36px; font-family: ‘Lato’; font-weight: bold;”>Colors</div>
<ul>
<li>
<div style=”color: #e50055; font-size: 30px;”>Wohasu pink #E50055</div>
<p style=”font-size: 16px;”>Sample code: &lt;p style=”color:#E50055;” &gt;Text here &lt;/p&gt;</p>
</li>
<li>
<div style=”color: #a0d523; font-size: 30px;”>Wohasu Green #a0d523</div>
<p style=”font-size: 16px;”>Sample code: &lt;p style=”color:#a0d523;” &gt;Text here &lt;/p&gt;</p>
</li>
</ul>

Join Our Tribe!

Subscribe To Our Newsletter