Lists

Bullet lists

Here is an example of an unordered list. Sub lists (<ul> nested into one of the main list's <li>) are also supported.

  • Identifying user needs, goals, behaviors, and pain points through user research
    • User interviews
    • Surveys/Questionnaires
    • Field studies
  • Designing site maps, wireframes, and prototypes
  • Validating designs through user testing and iterating with new features or fixes
  • Collaborating with product designers, developers, UI designers, and stakeholders
<ul class="bullet-list">
    <li>Identifying user needs, goals, behaviors, and pain points through user research
        <ul>
            <li>User interviews</li>
            <li>Surveys/Questionnaires</li>
            <li>Field studies</li>
        </ul>
    </li>
    <li>Designing site maps, wireframes, and prototypes</li>
    <li>Validating designs through user testing and iterating with new features or fixes</li>
    <li>Collaborating with product designers, developers, UI designers, and stakeholders</li>
</ul>

Numbered lists

Here is an example of an ordered list. Sub lists are not supported here.

  1. Define the problem
  2. Conduct research
  3. Brainstorm and conceptualize
  4. Create a prototype
  5. Select and finalize
  6. Product analysis
  7. Improve
<ol class="number-list">    
    <li>Define the problem</li>
    <li>Conduct research</li>
    <li>Brainstorm and conceptualize</li>
    <li>Create a prototype</li>
    <li>Select and finalize</li>
    <li>Product analysis</li>
    <li>Improve</li>
</ol>

Tables

This the main structure of a table. Each <td> can take pretty much anything as content. In order to change the text aligns of specific cells/columns, you can use the .ta-l, .ta-c, .ta-r classes.

Role Vacancies Projects Date Tags
Graphic Designer 81 119 30 Nov 2022
eng
remote
UI Designer 37 73 12 Jun 2022
eng
int
UX Designer 28 94 22 Feb 2020
ext
eng
Frontend Developer 53 104 15 Aug 2021
int
 
<table>
    <thead>
        <tr>
            <th>Role</th>
            <th>Vacancies</th>
            <th>Projects</th>
            <th>Date</th>
            <th class="ta-l">Tags</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Graphic Designer</td>
            <td>81</td>
            <td>119</td>
            <td>30 Nov 2022</td>
            <td class="ta-l">
                <div class="tags-wrapper">
                    <div class="tag">eng</div>
                    <div class="tag">remote</div>
                </div>
            </td>
        </tr>
        <tr>
            <td>UI Designer</td>
            <td>37</td>
            <td>73</td>
            <td>12 Jun 2022</td>
            <td class="ta-l">
                <div class="tags-wrapper">
                    <div class="tag">eng</div>
                    <div class="tag">int</div>
                </div>
            </td>
        </tr>
        <tr>
            <td>UX Designer</td>
            <td>28</td>
            <td>94</td>
            <td>22 Feb 2020</td>
            <td class="ta-l">
                <div class="tags-wrapper">
                    <div class="tag">ext</div>
                    <div class="tag">eng</div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Frontend Developer</td>
            <td>53</td>
            <td>104</td>
            <td>15 Aug 2021</td>
            <td class="ta-l">
                <div class="tags-wrapper">
                    <div class="tag">int</div>
                </div>
            </td>
        </tr>
    </tbody>
</table>