kanbanworkflowstimelinescrumrubyroadmapproject-planningproject-managementopenprojectangularissue-trackerifcgantt-chartganttbug-trackerboardsbcf
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.5 KiB
104 lines
3.5 KiB
# Widget Boxes
|
|
|
|
```
|
|
@full-width
|
|
|
|
<form>
|
|
<section class="widget-boxes -flex">
|
|
|
|
<!-- Widget box with arrows: Single-line -->
|
|
<div class="widget-box">
|
|
<h3 class="widget-box--header">
|
|
<span class="icon-context icon-home"></span>
|
|
<span class="widget-box--header-title">Widget Box</span>
|
|
</h3>
|
|
<p class="widget-box--additional-info">This widget box can be used to display content belonging to one subject.</p>
|
|
<ul class="widget-box--arrow-links">
|
|
<li>
|
|
<a>Go to Link 1</a>
|
|
</li>
|
|
<li>
|
|
<a>Go to link 2</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Widget box with arrows: Multiline -->
|
|
<div class="widget-box">
|
|
<h3 class="widget-box--header">
|
|
<i class="icon-context icon-home"></i>
|
|
<span class="widget-box--header-title">Widget Box 2</span>
|
|
</h3>
|
|
<ul class="widget-box--arrow-links">
|
|
<li class="-widget-box--arrow-multiline">
|
|
<div>
|
|
<img class="avatar-mini" title="OpenProject Admin" src="https://s3.amazonaws.com/uifaces/faces/twitter/jamesslock/128.jpg" alt="Avatar">
|
|
<a href="">Demo project</a>:
|
|
<a href="">Important news</a>
|
|
<br>
|
|
<p class="widget-box--additional-info">Added by
|
|
<a title="User OpenProject Admin" href="">OpenProject Admin</a>
|
|
<time title="10/31/2018 09:15 AM" class="timestamp">3 months</time> ago
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="-widget-box--arrow-multiline">
|
|
<div>
|
|
<img class="avatar-mini" title="OpenProject Admin" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Avatar">
|
|
<a href="">Demo project</a>:
|
|
<a href="">Great news !!!</a>
|
|
<br>
|
|
<p class="widget-box--additional-info">Added by
|
|
<a title="User OpenProject Admin" href="">OpenProject Admin</a>
|
|
<time title="08/14/2018 11:04 AM" class="timestamp">5 months</time> ago
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Widget box with button -->
|
|
<div class="widget-box">
|
|
<h3 class="widget-box--header">
|
|
<span class="icon-context icon-home"></span>
|
|
<span class="widget-box--header-title">Widget Box 3</span>
|
|
</h3>
|
|
<div class="overview">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, his ei propriae suscipit.
|
|
Sit in atqui accumsan ponderum, eum ut luptatum lobortis, has ei tota illud detraxit.
|
|
</p>
|
|
</div>
|
|
<div class="widget-box--buttons">
|
|
<a class="button -highlight" href="">
|
|
<i class="button--icon icon-edit"></i>
|
|
<span class="button--text">Edit</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Widget box with enumeration and multiple buttons -->
|
|
<div class="widget-box">
|
|
<h3 class="widget-box--header">
|
|
<span class="icon-context icon-home"></span>
|
|
<span class="widget-box--header-title">Widget Box 4</span>
|
|
</h3>
|
|
<ul class="widget-box--enumeration">
|
|
<li>Enum1</li>
|
|
<li>Enum2</li>
|
|
<li>Enum3</li>
|
|
</ul>
|
|
<div class="widget-box--buttons">
|
|
<a class="button -alt-highlight" title="Add" href="">
|
|
<i class="button--icon icon-add"></i>
|
|
<span class="button--text">Add</span>
|
|
</a>
|
|
<a class="button -highlight-inverted" title="View all" href="">
|
|
<span class="button--text">View all</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</form>
|
|
```
|
|
|