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.
73 lines
2.7 KiB
73 lines
2.7 KiB
# Info boxes
|
|
|
|
## Simple info boxes
|
|
```
|
|
<div class="info-boxes">
|
|
<h2 class="info-boxes--title">Heading</h2>
|
|
<div class="info-boxes--container">
|
|
<div class="info-boxes--item">
|
|
<h3 class="info-boxes--item-title">Box 1</h3>
|
|
<div class="info-boxes--item-content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-boxes--item">
|
|
<h3 class="info-boxes--item-title">Box 2</h3>
|
|
<div class="info-boxes--item-content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-boxes--item">
|
|
<h3 class="info-boxes--item-title">Box 3</h3>
|
|
<div class="info-boxes--item-content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Centered with image and links
|
|
```
|
|
<div class="info-boxes -centered">
|
|
<h2 class="info-boxes--title">Heading</h2>
|
|
<div class="info-boxes--container">
|
|
<div class="info-boxes--item">
|
|
<img src="https://via.placeholder.com/250x200" class="info-boxes--teaser-image">
|
|
<h3 class="info-boxes--item-title">Box 1</h3>
|
|
<div class="info-boxes--item-content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<ul class="widget-box--arrow-links">
|
|
<li>
|
|
<a href="" target="_blank">Learn more</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="info-boxes--item">
|
|
<img src="https://via.placeholder.com/250x200" class="info-boxes--teaser-image">
|
|
<h3 class="info-boxes--item-title">Box 2</h3>
|
|
<div class="info-boxes--item-content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<ul class="widget-box--arrow-links">
|
|
<li>
|
|
<a href="" target="_blank">Learn more</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="info-boxes--item">
|
|
<img src="https://via.placeholder.com/250x200" class="info-boxes--teaser-image">
|
|
<h3 class="info-boxes--item-title">Box 3</h3>
|
|
<div class="info-boxes--item-content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<ul class="widget-box--arrow-links">
|
|
<li>
|
|
<a href="" target="_blank">Learn more</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
``` |