<p class="intro">Amet consectetur adipisicing elit Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerum qui necessitatibus sequi laudantium ipsum. Odit, modi pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis deserunt nostrum nemo distinctio rerum qui necessitatibus.</p>
#{tag || 'p'}(
class=variant || 'bodytext',
)&attributes(attr)
| !{render(text, true)}
{
"text": "Amet consectetur adipisicing elit Quam sed vitae harum dolore corrupti a molestias blanditiis, deserunt, nostrum nemo distinctio rerum qui necessitatibus sequi laudantium ipsum. Odit, modi pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sed vitae harum dolore corrupti a molestias blanditiis deserunt nostrum nemo distinctio rerum qui necessitatibus.",
"variant": "intro"
}
body { // todo: move to _body.scss
@include mq($until: m) {
font-size: $font-size-default-mobile;
line-height: $line-height-default-mobile;
}
}
.bodytext {
font-size: $font-size-default-mobile;
line-height: $line-height-default-mobile;
@include mq($from: m) {
font-size: $font-size-default;
line-height: $line-height-default;
}
}
.large {
font-size: 1.9rem;
line-height: calc(3 / 1.9);
@include mq($from: m) {
font-size: 2.1rem;
line-height: calc(3 / 2.1);
}
@include mq($from: l) {
font-size: 2.3rem;
line-height: calc(3.2 / 2.3);
}
}
.small {
font-size: 1.5rem;
line-height: calc(2 / 1.5);
}
.intro {
font-size: 2.4rem;
line-height: calc(3.2 / 2.4);
@include mq($from: m) {
font-size: 2.8rem;
line-height: calc(3.6 / 2.8);
}
@include mq($from: m) {
font-size: 3.2rem;
line-height: calc(4.2 / 3.2);
}
}
There are no notes for this item.