<div class="label talk">Vortrag</div>
<div class="label training">Training</div>
<div class="label slides">Folien verfügbar</div>
<div class="label-big hint">Ausverkauft!</div>
<div class="label-big badge">Neu!</div>
<div class="label-big badge badge--inverted">Neu!</div>
import { Fragment } from 'complate-stream'
import Label from './components/01-atoms/text/block/label'
<Fragment>
<Label type="talk">
Vortrag
</Label>
<Label type="training">
Training
</Label>
<Label type="slides">
Folien verfügbar
</Label>
<Label type="hint" big>
Ausverkauft!
</Label>
<Label type="badge" big>
Neu!
</Label>
<Label type="badge" big inverted>
Neu!
</Label>
</Fragment>
{
"text": "Listen"
}
.label {
display: inline-block;
padding: $spacer-xxs;
line-height: $label-line-height-small;
font-size: $label-font-size-small;
&.talk {
@extend %heading-font-bold;
border-left: 6px solid $talk-label-text-color;
background-color: $talk-label-background-color;
text-transform: uppercase;
color: $talk-label-text-color;
}
&.training {
@extend %heading-font-bold;
border-left: 6px solid $training-label-text-color;
background-color: $training-label-background-color;
text-transform: uppercase;
color: $training-label-text-color;
}
&.slides {
@extend %heading-font-regular;
background-color: $slides-label-background-color;
color: $slides-label-text-color;
}
}
.label-big {
display: inline-block;
padding: $spacer-xs;
line-height: $label-big-line-height;
font-size: $label-big-font-size;
&.hint {
@extend %heading-font-bold;
border: 4px solid $training-label-text-color;
text-transform: uppercase;
color: $training-label-text-color;
}
&.badge,
&.badge--inverted {
@extend %heading-font-bold;
background-color: $badge-background-color;
text-transform: uppercase;
color: $badge-text-color;
}
&.badge--inverted {
background-color: $badge-background-color-inverted;
}
}
//Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
.label {
margin-right: $spacer-xxs;
line-height: $label-line-height;
font-size: $label-font-size;
}
}
import { createElement } from 'complate-stream'
import classNames from 'classnames'
export default function CaseTileTeaser ({ type, big, inverted }, ...children) {
let classname = classNames(big ? 'label-big' : 'label', type, { 'badge--inverted': inverted })
return <div class={classname}>{children}</div>
}
find a solution to make it work without a div wrapper for jsx