<p class="bodytext">Lorem ipsum dolor sit 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.</p>
#{tag || 'p'}(
  class=variant || 'bodytext',
)&attributes(attr)
  | !{render(text, true)}
{
  "text": "Lorem ipsum dolor sit 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."
}
  • Content:
    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);
      }
    }
    
  • URL: /components/raw/paragraph/paragraph.scss
  • Filesystem Path: src/components/atoms/paragraph/paragraph.scss
  • Size: 901 Bytes

There are no notes for this item.