-
Notifications
You must be signed in to change notification settings - Fork 0
/
trello-labels.html
130 lines (105 loc) · 7.75 KB
/
trello-labels.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Virtual Team Toolbox | Trello Labels</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this site -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Virtual Team Toolbox</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contribute</a>
</li>
<li class="nav-item">
<a class="btn btn-warning" href="toolbox.html">ToolBox</a>
</li>
</ul>
</div>
</div>
</nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron inner-cat-heading">
<div class="container">
<h2 class="text-center">Category: Project Management</h2>
</div>
</div>
<div class="container-fluid">
<div class="row lesson-row">
<div class="col-md-3 col-xs-1" id="sidebar">
<div class="list-group">
<a href="#menu1" class="list-group-item" data-toggle="collapse" data-parent="#sidebar">
<span class="hidden-sm-down">Project Management <i class="fa fa-caret-down"></i></span>
</a>
<div class="collapse" id="menu1">
<a href="cat-pm.html" class="list-group-item">
<span class="hidden-sm-down">Goals</span>
</a>
<a href="#menu2" class="list-group-item">
<span class="hidden-sm-down">Tools</span>
</a>
<a href="#menu3" class="list-group-item" data-toggle="collapse" data-parent="#sidebar">
<span class="hidden-sm-down">Trello <i class="fa fa-caret-down"></i></span>
</a>
<div class="collapse" id="menu3">
<a href="trello-intro.html" class="list-group-item" data-parent="#menu2">Introduction</a>
<a href="trello-setup.html" class="list-group-item" data-parent="#menu2">Setup</a>
<a href="trello-cards.html" class="list-group-item" data-parent="#menu2">Cards</a>
<a href="trello-labels.html" class="list-group-item active-list-item" data-parent="#menu2">Labels</a>
<a href="trello-teams.html" class="list-group-item" data-parent="#menu2">Teams</a>
</div>
<!-- <a href="#menu4" class="list-group-item">
<span class="hidden-sm-down">Item 3</span>
</a>
<a href="#menu5" class="list-group-item">
<span class="hidden-sm-down">Item 4</span>
</a> -->
</div><!-- End PM Collapse -->
</div><!-- End List Group -->
</div>
<div class="col-md-8 lesson-body">
<h2 class="text-center">Trello - Labels</h2>
<!-- Lesson video will go here -->
<!-- <img class="img-fluid" src="https://via.placeholder.com/900x300.png?text=Video+Here" /> -->
<!-- Start Actual Lesson Body -->
<!-- <h3 class="mt-3">What you will learn in this lesson</h3> -->
<p>A label is a way of categorizing a card by type, represented by a color and term or, for colorless labels, a term only. There are 10 label colors to choose from in Trello, and a colorless label option. You can choose to add label names if you wish. A single card can have multiple labels. Colored labels will display on the front and back of a card, and colorless labels (represented by the light gray color) will only display on the back of the card.</p>
<p>Often times, labels will be used to give at-a-glance context to the status of a card. For instance, you might add a label to a task that is in the “In-Progress” List which is orange and reads “Needs Help”. This would grab attention and immediately let everyone know that someone needs help with this card. Users no-longer have to go manually click each card to know what the general status is.</p>
<p>Another way to go about using labels is to just use colors for the most part, but have a set guideline within your team that you all know what colors mean what. That way everyone is on the same page, and your board isn’t cluttered with a lot of extra text.</p>
<p>These don’t have to be added to every card, but can be extremely useful when used appropriately.</p>
<p>Source: <a href="https://help.trello.com/article/797-adding-labels-to-cards" target="_blank">https://help.trello.com/article/797-adding-labels-to-cards</a></p>
<a href="trello-cards.html" class="btn btn-light">‹ Previous</a>
<a href="trello-teams.html" class="btn btn-light float-right">Next ›</a>
</div>
</div><!-- End Row -->
</div><!-- End Container -->
</main>
<footer>
<div class="container">
<p>© Virtual Team Toolbox 2019</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<script>
$('#menu1').collapse('show'); //Show the current page contents
$('#menu3').collapse('show'); //Show the current page contents
</script>
</body>
</html>