HIDA - Helmholtz Information and Data Science Academy

Paragraph 

<!-- Paragraph -->
<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>


<!-- Paragraph groß -->
<p class="large">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>


<!-- Paragraph klein -->
<p class="small">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>


<!-- Paragraph intro -->
<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)}
 
/* Paragraph */
{
  "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."
}


/* Paragraph groß */
{
  "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.",
  "variant": "large"
}


/* Paragraph klein */
{
  "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.",
  "variant": "small"
}


/* Paragraph intro */
{
  "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"
}
  • 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.