Some info that you want to call attention to.
Info
HTML
<div class="flex items-center justify-center pa4 bg-lightest-blue navy">
<svg class="w1" data-icon="info" viewBox="0 0 32 32" style="fill:currentcolor">
<title>info icon</title>
<path d="M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6"></path>
</svg>
<span class="lh-title ml3">Some info that you want to call attention to.</span>
</div>
css
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.lh-title {
line-height: 1.25;
}
.w1 {
width: 1rem;
}
.navy {
color: #001b44;
}
.bg-lightest-blue {
background-color: #cdecff;
}
.pa4 {
padding: 2rem;
}
.ml3 {
margin-left: 1rem;
}
Css stats for this component
- Gzipped Size
- 200B
- Selectors
- 9
- Declarations
- 9
Modules referenced
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-flexbox tachyons-line-height tachyons-widths tachyons-skins tachyons-spacing