<!-- Absatz -->
<div class="formatted-text">
    <p>Donec pede justo, fringilla vel, <a href="">aliquet nec, vulputate eget, arcu</a>. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
        nisi. Aenean vulputate eleifend tellus.</p>
    <p>Aenean leo ligula, porttitor eu, <strong>consequat vitae, eleifend ac, enim</strong>. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies
        nisi vel augue. Curabitur <em>ullamcorper ultricies nisi</em>. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>

<!-- Erster Absatz (Intro) -->
<div class="formatted-text formatted-text--intro">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim.</p>
</div>

<!-- Listen -->
<div class="formatted-text">
    <ul>
        <li>Item 1 <a href="">link</a> in eine liste</li>
        <li>Item 2 in die liste mit eine <a href="">link</a></li>
        <li>Item 3 <a href="">link</a> in eine liste</li>
    </ul>
    <ol>
        <li>Item 1 <a href="">link</a> in eine liste</li>
        <li>Item 2 in die liste mit eine <a href="">link</a></li>
        <li>Item 3 <a href="">link</a> in eine liste</li>
    </ol>
</div>

<!-- Hinweis -->
<div class="formatted-text formatted-text--small">
    <p>Mit einem * makierte Felder sind Pflichtfelder, bitte füllen Sie diese aus.</p>
</div>

<!-- Fußnote -->
<div class="formatted-text formatted-text--footnote">
    <p>* Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

<!-- Hinweis -->
<div class="formatted-text formatted-text--small formatted-text--form">
    <p>Mit einem * makierte Felder sind Pflichtfelder, bitte füllen Sie diese aus.</p>
</div>

<!-- Bild línks -->
<div class="formatted-text formatted-text--image-left">
    <figure class="figure" aria-labelledby="figure-3b4c">
        <div class="figure__media">
            <img class="image" alt="Das ist ein Platzhalter-Bild" src="/images/dummy/figure-480x320.jpg" />
        </div>
        <figcaption class="figure__caption" id="figure-3b4c">
            Ich bin eine Bildunterschrift <small class="figure__copyright">(Quellenangabe)</small>
        </figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim.</p>
    <ul>
        <li>Item 1 <a href="">link</a> in eine liste</li>
        <li>Item 2 in die liste mit eine <a href="">link</a></li>
        <li>Item 3 <a href="">link</a> in eine liste</li>
    </ul>
</div>

<!-- Bild Réchts -->
<div class="formatted-text formatted-text--image-right">
    <figure class="figure" aria-labelledby="figure-c41f">
        <div class="figure__media">
            <img class="image" alt="Das ist ein Platzhalter-Bild" src="/images/dummy/figure-480x320.jpg" />
        </div>
        <figcaption class="figure__caption" id="figure-c41f">
            Ich bin eine Bildunterschrift <small class="figure__copyright">(Quellenangabe)</small>
        </figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim.</p>
    <ol>
        <li>Item 1 <a href="">link</a> in eine liste</li>
        <li>Item 2 in die liste mit eine <a href="">link</a></li>
        <li>Item 3 <a href="">link</a> in eine liste</li>
    </ol>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Is intro or small?
  if (intro) attr.class.push('formatted-text--intro');

  //- Small
  if (small) attr.class.push('formatted-text--small');

  //- Extra spacing
  if (extraSpacing) attr.class.push('formatted-text--extra-spacing');

  //- Modifier
  if (modifier) attr.class.push(`formatted-text--${modifier}`);

  //- Tag
  tag = tag ? tag : 'div';

//- Render atom
#{tag}.formatted-text&attributes(attr)
  if figure
    != include('@figure', figure)

  if content
    | !{renderPug(content)}
/* Absatz */
{
  "content": "p Donec pede justo, fringilla vel, #[a(href='') aliquet nec, vulputate eget, arcu]. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.\np Aenean leo ligula, porttitor eu, #[strong consequat vitae, eleifend ac, enim]. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur #[em ullamcorper ultricies nisi]. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.\n"
}

/* Erster Absatz (Intro) */
{
  "intro": true,
  "content": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.\n"
}

/* Listen */
{
  "content": "ul\n  li Item 1 #[a(href=\"\") link] in eine liste\n  li Item 2 in die liste mit eine #[a(href=\"\") link]\n  li Item 3 #[a(href=\"\") link] in eine liste\nol\n  li Item 1 #[a(href=\"\") link] in eine liste\n  li Item 2 in die liste mit eine #[a(href=\"\") link]\n  li Item 3 #[a(href=\"\") link] in eine liste\n"
}

/* Hinweis */
{
  "small": true,
  "content": "p Mit einem * makierte Felder sind Pflichtfelder, bitte füllen Sie diese aus."
}

/* Fußnote */
{
  "modifier": "footnote",
  "content": "p * Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
}

/* Hinweis */
{
  "small": true,
  "modifier": "form",
  "content": "p Mit einem * makierte Felder sind Pflichtfelder, bitte füllen Sie diese aus."
}

/* Bild línks */
{
  "modifier": "image-left",
  "figure": true,
  "content": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.\nul\n  li Item 1 #[a(href=\"\") link] in eine liste\n  li Item 2 in die liste mit eine #[a(href=\"\") link]\n  li Item 3 #[a(href=\"\") link] in eine liste\n"
}

/* Bild Réchts */
{
  "modifier": "image-right",
  "figure": true,
  "content": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.\nol\n  li Item 1 #[a(href=\"\") link] in eine liste\n  li Item 2 in die liste mit eine #[a(href=\"\") link]\n  li Item 3 #[a(href=\"\") link] in eine liste\n"
}

  • Content:
    .formatted-text {
      margin-bottom: 2rem;
    
      a {
        @include link($color-blue-light, $color-blue);
    
        font-weight: bold;
      }
    
      p,
      ol,
      ul {
        margin-bottom: 2rem;
      }
    
      .headline:not(:first-child) {
        margin-top: 3rem;
      }
    
      ol,
      ul {
        padding-left: 3rem;
      }
    
      li {
        margin-bottom: 1rem;
        padding-left: 1rem;
      }
    }
    
    .formatted-text--danger {
      color: $color-red;
    }
    
    .formatted-text--intro {
      color: $color-blue;
      font-size: 1.9rem;
    }
    
    .formatted-text--small {
      font-size: 1.5rem;
    }
    
    .formatted-text--footnote {
      font-size: 10pt;
    }
    
    .formatted-text--extra-spacing {
      margin: 1rem 0 4rem;
    }
    
    .formatted-text--form {
      margin-bottom: 0;
    
      p {
        margin-bottom: 0;
      }
    }
    
    .formatted-text--image-right,
    .formatted-text--image-left {
      .figure {
        margin-bottom: 2rem;
      }
    
      &::after {
        @include mq($from: m) {
          clear: both;
          content: '';
          display: block;
        }
      }
    }
    
    .formatted-text--image-left {
      .figure {
        @include mq($from: m) {
          float: left;
          margin: 0.5rem 6rem 3rem 0;
          width: 30%;
        }
      }
    
      &.formatted-text p {
        @include mq($from: m) {
          left: -3.8%;
          position: relative;
        }
    
        @include mq($from: l) {
          left: -3.5%;
        }
    
        @include mq($from: xl) {
          left: -2%;
        }
      }
    }
    
    .formatted-text--image-right {
      .figure {
        @include mq($from: m) {
          float: right;
          margin: 0.5rem 0 3rem 3rem;
          width: 30%;
        }
      }
    }
    
    .formatted-text--image-right {
      flex-direction: row-reverse;
    }
    
    @include mq($from: m) {
      .formatted-text {
        .headline:not(:first-child) {
          margin-top: 4rem;
        }
    
        ol,
        ul {
          padding-bottom: 0.5rem;
          padding-top: 0.5rem;
        }
      }
    
      .formatted-text--intro {
        font-size: 2.1rem;
      }
    }
    
    @include mq($from: l) {
      .formatted-text--intro {
        font-size: 2.3rem;
      }
    }
    
  • URL: /components/raw/formatted-text/formatted-text.scss
  • Filesystem Path: src/components/molecules/formatted-text/formatted-text.scss
  • Size: 1.8 KB

There are no notes for this item.