Baden-Württemberg Stiftung

List-Item @list-item

Design

Variants

List-Item minimal
List-Item mit Bild
List-Item mit hervorhebung
List-Item Publikation
List-Item Event
List-Item Event extended
List-Item Events
List-Item Gallery
List-Item Video
List-Item Programme
List-Item Programme with Quickinfo
List-Item Programme with Quickinfo "Finished"
List-Item mit Kontakt
List-Item mit Kontakt Logo
List-Item mit Download
List-Item mit Download
List-Item mit Prozentanzeige

<article class="list-item">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__kicker">News</div><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Das ist eine Headline expedition d und experience</h2>
        </a>
        <div class="list-item__text">
          <div class="text">
            <p>Teasertext zum Buch ipsum dolor sit amet, consetetur sadipscing elitr, sed dim nonumy eirmod tempor invidunt</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": "News",
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Das ist eine Headline expedition d und experience\n"
  },
  "text": {
    "content": [
      "p Teasertext zum Buch ipsum dolor sit amet, consetetur sadipscing elitr, sed dim nonumy eirmod tempor invidunt\n"
    ]
  }
}

List-Item mit Bild @list-item--image

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item">
  <div class="list-item__inner">
    <div class="list-item__image">
      <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="140" src="https://bildermangel.de/210x140/F5F5F5/28281a.png?text=210x140" width="210" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/210x140/F5F5F5/28281a.png?text=210x140" width="210" height="140" alt="Teaser Thumb" /></div>
    </div>
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__kicker">News</div><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Das ist eine Headline expedition d und experience</h2>
        </a>
        <div class="list-item__text">
          <div class="text">
            <p>Teasertext zum Buch ipsum dolor sit amet, consetetur sadipscing elitr, sed dim nonumy eirmod tempor invidunt</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": {
    "width": 210,
    "height": 140,
    "alt": "Teaser Thumb"
  },
  "kicker": "News",
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Das ist eine Headline expedition d und experience\n"
  },
  "text": {
    "content": [
      "p Teasertext zum Buch ipsum dolor sit amet, consetetur sadipscing elitr, sed dim nonumy eirmod tempor invidunt\n"
    ]
  }
}

List-Item mit hervorhebung @list-item--highlight

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__kicker">News</div><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Das ist eine Headline <mark class="f-highlight">expe</mark>dition d und <mark class="f-highlight">expe</mark>rience</h2>
        </a>
        <div class="list-item__text">
          <div class="text">
            <p>Teasertext zum Buch ipsum dolor sit amet, consetetur sadipscing elitr, sed dim nonumy eirmod tempor invidunt</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": "News",
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Das ist eine Headline #[mark.f-highlight expe]dition d und #[mark.f-highlight expe]rience\n"
  },
  "text": {
    "content": [
      "p Teasertext zum Buch ipsum dolor sit amet, consetetur sadipscing elitr, sed dim nonumy eirmod tempor invidunt\n"
    ]
  }
}

List-Item Publikation @list-item--publication

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item list-item--publication">
  <div class="list-item__inner">
    <div class="list-item__image">
      <div class="image loading" style="padding-top: 140%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="140" src="https://bildermangel.de/100x140/F5F5F5/28281a.png?text=100x140" width="100" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/100x140/F5F5F5/28281a.png?text=100x140" width="100" height="140" alt="Teaser Thumb" /></div>
    </div>
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__kicker">Publikation</div><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Das ist eine Headline expedition d und experience</h2>
        </a>
        <div class="list-item__text">
          <div class="text">
            <p>Teasertext zum Buch ipsum dolor sit amet, consetetur sadipscing elitr, sed dim nonumy eirmod tempor invidunt</p>
          </div>
        </div>
      </div>
      <ul class="list-item__links">
        <li class="list-item__link"><a class="icon-link" href="download.pdf" target="_blank" download="download.pdf"><span class="icon-link__icon"><svg class="icon icon--download" viewBox="0 0 200 200">
  <use xlink:href="#icon-download"></use>
</svg></span><span class="icon-link__text">Downloaden <span class="f-small">(PDF, 0.8 MB)</span></span></a></li>
        <li class="list-item__link"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--basket" viewBox="0 0 200 200">
  <use xlink:href="#icon-basket"></use>
</svg></span><span class="icon-link__text">Bestellen</span></a></li>
      </ul>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": {
    "width": 100,
    "height": 140,
    "alt": "Teaser Thumb"
  },
  "kicker": "Publikation",
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Das ist eine Headline expedition d und experience\n"
  },
  "text": {
    "content": [
      "p Teasertext zum Buch ipsum dolor sit amet, consetetur sadipscing elitr, sed dim nonumy eirmod tempor invidunt\n"
    ]
  },
  "type": "publication",
  "links": [
    {
      "download": "download.pdf",
      "link": "download.pdf",
      "text": "Downloaden #[span.f-small (PDF, 0.8 MB)]\n",
      "icon": "download"
    },
    {
      "link": "#",
      "text": "Bestellen",
      "icon": "basket"
    }
  ]
}

List-Item Event @list-item--event

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__kicker">Veranstaltung</div>
        <div class="list-item__date">
          <div class="text">
            <p>01. – 05. September 2020</p>
          </div>
        </div><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Das ist eine Headline</h2>
        </a>
      </div>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": "Veranstaltung",
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Das ist eine Headline\n"
  },
  "text": null,
  "date": {
    "content": [
      "p 01. – 05. September 2020\n"
    ]
  }
}

List-Item Event extended @list-item--event-extended

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__info">
          <div class="list-item__info-item"><svg class="icon icon--calendar list-item__info-item-icon" viewBox="0 0 200 200">
              <use xlink:href="#icon-calendar"></use>
            </svg><span class="list-item__info-item-text">28.09.2022</span></div>
          <div class="list-item__info-item"><svg class="icon icon--location list-item__info-item-icon" viewBox="0 0 200 200">
              <use xlink:href="#icon-location"></use>
            </svg><span class="list-item__info-item-text">online</span></div>
          <div class="list-item__info-item"><span class="list-item__info-item-text">|</span></div>
          <div class="list-item__info-item"><span class="list-item__info-item-text">Kindergarten</span></div>
        </div><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item">
          <h2 class="headline headline--5 list-item__headline-text">Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot</h2>
        </a>
      </div>
    </div>
  </div>
  <div class="list-item__icon-button">
    <div class="icon-button icon-button--secondary"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200">
        <use xlink:href="#icon-arrow-right"></use>
      </svg></div>
  </div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Hand in Hand – das Unterstützungs- und Vernetzungsangebot im Gesunden Boot\n"
  },
  "text": null,
  "linkOverlayTarget": "list-item",
  "date": null,
  "info": [
    {
      "icon": "calendar",
      "text": "28.09.2022"
    },
    {
      "icon": "location",
      "text": "online"
    },
    {
      "text": "|"
    },
    {
      "icon": null,
      "text": "Kindergarten"
    }
  ],
  "iconButton": {
    "icon": "arrow-right"
  }
}

List-Item Events @list-item--events

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item list-item--events">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-meta">
        <div class="list-item__content-meta-date">07.03.</div>
        <div class="list-item__content-meta-date">13.03.</div>
      </div>
      <div class="list-item__content-inner">
        <div class="list-item__info">
          <div class="list-item__info-item"><svg class="icon icon--grid-event list-item__info-item-icon" viewBox="0 0 200 200">
              <use xlink:href="#icon-grid-event"></use>
            </svg><span class="list-item__info-item-text">Schnupperstudium</span></div>
          <div class="list-item__info-item"><svg class="icon icon--location list-item__info-item-icon" viewBox="0 0 200 200">
              <use xlink:href="#icon-location"></use>
            </svg><span class="list-item__info-item-text">Heidelberg</span></div>
        </div>
        <div class="list-item__headline" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Ich bin der Titel einer Veranstaltung</h2>
        </div>
      </div>
    </div>
  </div>
  <div class="list-item__icon-button-event-wrapper">
    <div class="list-item__icon-button-event">
      <div class="icon-button icon-button--secondary"><svg class="icon icon--eye icon-button__icon" viewBox="0 0 200 200">
          <use xlink:href="#icon-eye"></use>
        </svg></div>
    </div>
    <div class="list-item__icon-button-event">
      <div class="icon-button icon-button--secondary"><svg class="icon icon--edit icon-button__icon" viewBox="0 0 200 200">
          <use xlink:href="#icon-edit"></use>
        </svg></div>
    </div>
    <div class="list-item__icon-button-event">
      <div class="icon-button icon-button--secondary"><svg class="icon icon--trash icon-button__icon" viewBox="0 0 200 200">
          <use xlink:href="#icon-trash"></use>
        </svg></div>
    </div>
  </div>
</article>

{
  "link": null,
  "image": null,
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Ich bin der Titel einer Veranstaltung\n"
  },
  "text": null,
  "type": "events",
  "linkOverlayTarget": null,
  "contentMeta": [
    "div.list-item__content-meta-date 07.03.\ndiv.list-item__content-meta-date 13.03.\n"
  ],
  "date": null,
  "info": [
    {
      "icon": "grid-event",
      "text": "Schnupperstudium"
    },
    {
      "icon": "location",
      "text": "Heidelberg"
    }
  ],
  "iconButtonsEvent": [
    {
      "icon": "eye"
    },
    {
      "icon": "edit"
    },
    {
      "icon": "trash"
    }
  ]
}

List-Item Gallery @list-item--gallery

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item">
  <div class="list-item__inner">
    <div class="list-item__image">
      <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="140" src="https://bildermangel.de/210x140/F5F5F5/28281a.png?text=210x140" width="210" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/210x140/F5F5F5/28281a.png?text=210x140" width="210" height="140" alt="Teaser Thumb" /></div>
    </div>
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__kicker">Bildergalerie</div><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Das ist eine Headline expedition d und experience</h2>
        </a>
        <div class="list-item__meta"><svg class="icon icon--gallery" viewBox="0 0 200 200">
            <use xlink:href="#icon-gallery"></use>
          </svg>
          <div class="text">
            <p>10 Bilder</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": {
    "width": 210,
    "height": 140,
    "alt": "Teaser Thumb"
  },
  "kicker": "Bildergalerie",
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Das ist eine Headline expedition d und experience\n"
  },
  "text": null,
  "meta": {
    "metaIcon": {
      "icon": "gallery"
    },
    "metaText": {
      "content": [
        "p 10 Bilder\n"
      ]
    }
  }
}

List-Item Video @list-item--video

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item">
  <div class="list-item__inner">
    <div class="list-item__image">
      <div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Teaser Thumb" height="140" src="https://bildermangel.de/210x140/F5F5F5/28281a.png?text=210x140" width="210" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/210x140/F5F5F5/28281a.png?text=210x140" width="210" height="140" alt="Teaser Thumb" /></div>
    </div>
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__kicker">Video</div><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Das ist eine Headline expedition d und experience</h2>
        </a>
        <div class="list-item__meta"><svg class="icon icon--play" viewBox="0 0 200 200">
            <use xlink:href="#icon-play"></use>
          </svg>
          <div class="text">
            <p>3:23 Min</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": {
    "width": 210,
    "height": 140,
    "alt": "Teaser Thumb"
  },
  "kicker": "Video",
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Das ist eine Headline expedition d und experience\n"
  },
  "text": null,
  "meta": {
    "metaIcon": {
      "icon": "play"
    },
    "metaText": {
      "content": [
        "p 3:23 Min\n"
      ]
    }
  }
}

List-Item Programme @list-item--programme

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item list-item--tender">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner"><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Talent im Land</h2>
        </a>
        <div class="list-item__text">
          <div class="text">
            <p>Forschung · Stipendienprogramm · Schülerinnen & Schüler · ab 2003</p>
          </div>
        </div>
      </div>
    </div>
    <div class="list-item__tender"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
        <use xlink:href="#icon-stopwatch"></use>
      </svg>
      <div class="text text--small">
        <p>Ausschreibung endet bald</p>
      </div>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Talent im Land\n"
  },
  "text": {
    "content": [
      "p Forschung · Stipendienprogramm · Schülerinnen & Schüler · ab 2003\n"
    ]
  },
  "type": "tender",
  "tender": {
    "small": true,
    "content": [
      "p Ausschreibung endet bald\n"
    ]
  }
}

List-Item Programme with Quickinfo @list-item--quickinfo

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item list-item--tender">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner"><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Talent im Land</h2>
        </a>
        <div class="list-item__text">
          <div class="text">
            <p>Forschung · Stipendienprogramm · Schülerinnen & Schüler · ab 2003</p>
          </div>
        </div>
      </div>
    </div>
    <div class="list-item__tender"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
        <use xlink:href="#icon-stopwatch"></use>
      </svg>
      <div class="text text--small">
        <p>Ausschreibung endet bald</p>
      </div>
    </div>
  </div>
  <div class="list-item__quickinfo">
    <div class="quickinfo">
      <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-7d1b-content" id="id-7d1b-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-b778-title">
            <title id="icon-b778-title">Schnellinfo zeigen</title>
            <use xlink:href="#icon-list"></use>
          </svg></button></div>
      <article class="quickinfo__panel" id="id-7d1b-content" aria-labelledby="id-7d1b-title">
        <div class="quickinfo__content" tabindex="-1">
          <div class="quickinfo__content-inner">
            <div class="quickinfo__block" id="block-id-ee88">
              <h2 class="headline headline--3">Talent im Land</h2>
            </div>
            <div class="quickinfo__block" id="block-id-ba45">
              <div class="info info--condensed">
                <p class="info__text"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
                    <use xlink:href="#icon-stopwatch"></use>
                  </svg>Die Bewerbungsfrist endet am 31.3.2020. <a class="link link--external" href="#" target="_blank" rel="noopener noreferrer">Jetzt informieren und bewerben</a></p>
              </div>
            </div>
            <div class="quickinfo__block" id="block-id-5c4d">
              <div class="meta-info meta-info--vertical">
                <dl class="meta-info__list">
                  <div class="meta-info__item">
                    <dt class="meta-info__label">Bereich</dt>
                    <dd class="meta-info__content">Forschung</dd>
                  </div>
                  <div class="meta-info__item">
                    <dt class="meta-info__label">Typ</dt>
                    <dd class="meta-info__content">Programm</dd>
                  </div>
                  <div class="meta-info__item">
                    <dt class="meta-info__label">Thema</dt>
                    <dd class="meta-info__content">Technologie, Wissenschaft, MINT</dd>
                  </div>
                  <div class="meta-info__item">
                    <dt class="meta-info__label">Zielgruppe</dt>
                    <dd class="meta-info__content">Schülerinnen &amp; Schüler</dd>
                  </div>
                </dl>
              </div>
            </div>
            <div class="quickinfo__block" id="block-id-35b4">
              <div class="text">
                <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
              </div>
            </div>
            <div class="quickinfo__block" id="block-id-42f2">
              <div class="text">
                <p><b>Ziel</b> <br />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>
            </div>
            <div class="quickinfo__block" id="block-id-fa65">
              <div class="text">
                <p><b>Kurzbeschreibung2</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
              </div>
            </div>
            <div class="quickinfo__block" id="block-id-61e1">
              <div class="text">
                <p><b>Ziel2</b> <br />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>
            </div>
            <div class="quickinfo__block" id="block-id-0e53"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg><span class="button__text">Zum Programm</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-08d5-title">
                <title id="icon-08d5-title">Schnellinfo schließen</title>
                <use xlink:href="#icon-close"></use>
              </svg></button>
          </div>
        </div>
      </article>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Talent im Land\n"
  },
  "text": {
    "content": [
      "p Forschung · Stipendienprogramm · Schülerinnen & Schüler · ab 2003\n"
    ]
  },
  "type": "tender",
  "quickinfo": true,
  "tender": {
    "small": true,
    "content": [
      "p Ausschreibung endet bald\n"
    ]
  }
}

List-Item Programme with Quickinfo "Finished" @list-item--finished

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner"><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Talent im Land</h2>
        </a>
        <div class="list-item__text">
          <div class="text">
            <p>Forschung · Stipendienprogramm · Schülerinnen & Schüler · ab 2003 · <span class="list-item__text--badge">Abgeschlossen</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="list-item__quickinfo">
    <div class="quickinfo">
      <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-edf1-content" id="id-edf1-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-dc09-title">
            <title id="icon-dc09-title">Schnellinfo zeigen</title>
            <use xlink:href="#icon-list"></use>
          </svg></button></div>
      <article class="quickinfo__panel" id="id-edf1-content" aria-labelledby="id-edf1-title">
        <div class="quickinfo__content" tabindex="-1">
          <div class="quickinfo__content-inner">
            <div class="quickinfo__block" id="block-id-b2c3">
              <h2 class="headline headline--3">Talent im Land</h2>
            </div>
            <div class="quickinfo__block" id="block-id-cece">
              <div class="meta-info meta-info--vertical">
                <dl class="meta-info__list">
                  <div class="meta-info__item">
                    <dt class="meta-info__label">Bereich</dt>
                    <dd class="meta-info__content">Forschung</dd>
                  </div>
                  <div class="meta-info__item">
                    <dt class="meta-info__label">Typ</dt>
                    <dd class="meta-info__content">Programm</dd>
                  </div>
                  <div class="meta-info__item">
                    <dt class="meta-info__label">Thema</dt>
                    <dd class="meta-info__content">Technologie, Wissenschaft, MINT</dd>
                  </div>
                  <div class="meta-info__item">
                    <dt class="meta-info__label">Zielgruppe</dt>
                    <dd class="meta-info__content">Schülerinnen &amp; Schüler</dd>
                  </div>
                  <div class="meta-info__item meta-info__item--badge">
                    <dt class="meta-info__label">Status</dt>
                    <dd class="meta-info__content">Abgeschlossen</dd>
                  </div>
                </dl>
              </div>
            </div>
            <div class="quickinfo__block" id="block-id-a15f">
              <div class="text">
                <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
              </div>
            </div>
            <div class="quickinfo__block" id="block-id-c924">
              <div class="text">
                <p><b>Ziel</b> <br />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>
            </div>
            <div class="quickinfo__block" id="block-id-854d">
              <div class="text">
                <p><b>Kurzbeschreibung2</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
              </div>
            </div>
            <div class="quickinfo__block" id="block-id-6cc6">
              <div class="text">
                <p><b>Ziel2</b> <br />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>
            </div>
            <div class="quickinfo__block" id="block-id-3fc5"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                  <use xlink:href="#icon-arrow-right"></use>
                </svg><span class="button__text">Zum Programm</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-feb2-title">
                <title id="icon-feb2-title">Schnellinfo schließen</title>
                <use xlink:href="#icon-close"></use>
              </svg></button>
          </div>
        </div>
      </article>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Talent im Land\n"
  },
  "text": {
    "content": [
      "p Forschung · Stipendienprogramm · Schülerinnen & Schüler · ab 2003 · Abgeschlossen\n"
    ]
  },
  "quickinfo": {
    "iconButton": {
      "icon": "list"
    },
    "blocks": [
      {
        "use": "headline--headline-3",
        "id": "c152sdq",
        "inherit": true,
        "settings": {
          "text": "Talent im Land",
          "level": 2
        }
      },
      {
        "use": "meta-info--finished",
        "id": "iuy8q",
        "inherit": true,
        "settings": {
          "vertical": true
        }
      },
      {
        "use": "text",
        "id": "c156serwf",
        "inherit": true,
        "settings": {
          "content": "p #[b Kurzbeschreibung] #[br]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. sed diam nonumy eirmod tempor invidunt ut labore et dolore\n"
        }
      },
      {
        "use": "text",
        "id": "c156sesdfff",
        "inherit": true,
        "settings": {
          "content": "p #[b Ziel] #[br]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n"
        }
      },
      {
        "use": "text",
        "id": "c145kjiowf",
        "inherit": true,
        "settings": {
          "content": "p #[b Kurzbeschreibung2] #[br]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. sed diam nonumy eirmod tempor invidunt ut labore et dolore\n"
        }
      },
      {
        "use": "text",
        "id": "c156sesdfff",
        "inherit": true,
        "settings": {
          "content": "p #[b Ziel2] #[br]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\n"
        }
      },
      {
        "use": "button--icon",
        "id": "c145eq",
        "inherit": true,
        "settings": {
          "text": "Zum Programm"
        }
      }
    ]
  },
  "tender": null
}

List-Item mit Kontakt @list-item--contact

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item list-item--contact">
  <div class="list-item__inner">
    <div class="list-item__image">
      <div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Kontakt Bild" height="175" src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/175x175/F5F5F5/28281a.png?text=175x175" width="175" height="175" alt="Kontakt Bild" /></div>
    </div>
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__headline" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Titel Vorname Name</h2>
        </div>
        <div class="list-item__text">
          <div class="text">
            <p>Funktion <br /> <a class="link" href="#">Programmname #1</a>, <a class="link" href="#">Programmname #2</a>, <a class="link" href="#">Ein sehr langer Programmname #1</a><br /> Tel <a href="tel:71124847615">+49 (0) 711 248 476-15</a> / Fax +49 (0) 711 248 476-50 <br /> <a class="link" href="schewe@bwstiftung.de">schewe@bwstiftung.de</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

{
  "link": null,
  "image": {
    "width": 175,
    "height": 175,
    "alt": "Kontakt Bild"
  },
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Titel Vorname Name\n"
  },
  "text": {
    "content": "p Funktion #[br] #[a.link(href='#') Programmname #1], #[a.link(href='#') Programmname #2], #[a.link(href='#') Ein sehr langer Programmname #1]#[br] Tel #[a(href='tel:71124847615') +49 (0) 711 248 476-15] / Fax +49 (0) 711 248 476-50 #[br] #[a.link(href='schewe@bwstiftung.de') schewe@bwstiftung.de]\n"
  },
  "type": "contact"
}

List-Item mit Kontakt Logo @list-item--contact-logo

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item list-item--contact">
  <div class="list-item__inner">
    <div class="list-item__image">
      <div class="list-item__logo">
        <div class="list-item__logo-inner">
          <div class="logo"><img class="logo__image" src="/images/logo.svg" width="655" height="284" alt="Baden-Württemberg Stiftung" /></div>
        </div>
      </div>
    </div>
    <div class="list-item__content">
      <div class="list-item__content-inner">
        <div class="list-item__headline" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Nummer gegen Kummer/Elterntelefon</h2>
        </div>
        <div class="list-item__text">
          <div class="text">
            <p>Kostenlose und anonyme Telefonberatung <br /> Mo - Fr zwischen 9 und 17 Uhr, zusätzlich Dienstag und Donnerstag bis 19 Uhr.</p>
            <p><a href="tel:71124847615">+49 0800 - 11105550</a></p>
          </div>
        </div>
      </div>
      <ul class="list-item__links">
        <li class="list-item__link"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Zur Webseite</span></a></li>
      </ul>
    </div>
  </div>
</article>

{
  "link": null,
  "image": null,
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Nummer gegen Kummer/Elterntelefon"
  },
  "text": {
    "content": "p Kostenlose und anonyme Telefonberatung #[br] Mo - Fr zwischen 9 und 17 Uhr, zusätzlich Dienstag und Donnerstag bis 19 Uhr.\np #[a(href='tel:71124847615') +49 0800 - 11105550]\n"
  },
  "type": "contact",
  "links": [
    {
      "text": "Zur Webseite",
      "icon": "arrow-right"
    }
  ],
  "logo": {
    "link": null,
    "pathLight": null
  }
}

List-Item mit Download @list-item--download

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item list-item--download">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner"><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Leitlinien des Baden-Württemberg-STIPENDIUMs für Studierende</h2>
        </a></div>
    </div>
  </div>
  <div class="list-item__download">
    <div class="text text--small">
      <p>PDF, 2.8 MB</p>
    </div><svg class="icon icon--download" viewBox="0 0 200 200">
      <use xlink:href="#icon-download"></use>
    </svg>
  </div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Leitlinien des Baden-Württemberg-STIPENDIUMs für Studierende"
  },
  "text": null,
  "type": "download",
  "download": {
    "downloadText": {
      "small": true,
      "content": "p PDF, 2.8 MB"
    },
    "downloadIcon": {
      "icon": "download"
    }
  }
}

List-Item mit Download @list-item--tooltip

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item list-item--tooltip">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner"><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Anlagenmechaniker/in - Sanitär, Heizungs- und Klimatechnik</h2>
        </a></div>
    </div>
  </div>
  <div class="list-item__tooltip"><button class="icon-button list-item__tooltip__button" type="button"><svg class="icon icon--navigation icon-button__icon" viewBox="0 0 200 200">
        <use xlink:href="#icon-navigation"></use>
      </svg></button>
    <div class="list-item__tooltip__popup"><button class="list-item__tooltip__popup__close" type="button"><svg class="icon icon--close" viewBox="0 0 200 200">
          <use xlink:href="#icon-close"></use>
        </svg></button>
      <div class="list-item__tooltip__popup__text">Finde heraus wie sehr dieser Job zu dir passt. Absolviere den <a class="link" href="#">Karrienavigator</a></div>
    </div>
  </div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Anlagenmechaniker/in - Sanitär, Heizungs- und Klimatechnik"
  },
  "text": null,
  "type": "tooltip",
  "tooltip": {
    "icon": "navigation",
    "title": "Karrierenavigator",
    "text": "Finde heraus wie sehr dieser Job zu dir passt. Absolviere den  #[a.link(href=\"#\") Karrienavigator]"
  }
}

List-Item mit Prozentanzeige @list-item--percentage

Vorschau in eignem Tab anzeigen

HTML
Context

<article class="list-item list-item--percentage">
  <div class="list-item__inner">
    <div class="list-item__content">
      <div class="list-item__content-inner"><a class="list-item__headline js-overlay-link" href="#" data-overlay-target="list-item__content-inner">
          <h2 class="headline headline--5 list-item__headline-text">Anlagenmechaniker/in - Sanitär, Heizungs- und Klimatechnik</h2>
        </a></div>
    </div>
  </div>
  <div class="progress-circle" data-value="0"></div><br /><br />
  <div class="progress-circle" data-value="25"></div><br /><br />
  <div class="progress-circle" data-value="50"></div><br /><br />
  <div class="progress-circle" data-value="94"></div><br /><br />
  <div class="progress-circle" data-value="95"></div><br /><br />
  <div class="progress-circle" data-value="100"></div>
</article>

{
  "link": "#",
  "image": null,
  "kicker": null,
  "headline": {
    "size": 5,
    "level": 2,
    "text": "Anlagenmechaniker/in - Sanitär, Heizungs- und Klimatechnik"
  },
  "text": null,
  "type": "percentage",
  "percentage": {
    "attr": {
      "data-value": 82
    }
  }
}

List-Item @list-item

Variants

# List-Item minimal @list-item

# List-Item mit Bild @list-item--image

# List-Item mit hervorhebung @list-item--highlight

# List-Item Publikation @list-item--publication

# List-Item Event @list-item--event

# List-Item Event extended @list-item--event-extended

# List-Item Events @list-item--events

# List-Item Gallery @list-item--gallery

# List-Item Video @list-item--video

# List-Item Programme @list-item--programme

# List-Item Programme with Quickinfo @list-item--quickinfo

# List-Item Programme with Quickinfo "Finished" @list-item--finished

# List-Item mit Kontakt @list-item--contact

# List-Item mit Kontakt Logo @list-item--contact-logo

# List-Item mit Download @list-item--download

# List-Item mit Download @list-item--tooltip

# List-Item mit Prozentanzeige @list-item--percentage

List-Item minimal @list-item

List-Item mit Bild @list-item--image

List-Item mit hervorhebung @list-item--highlight

List-Item Publikation @list-item--publication

List-Item Event @list-item--event

List-Item Event extended @list-item--event-extended

List-Item Events @list-item--events

List-Item Gallery @list-item--gallery

List-Item Video @list-item--video

List-Item Programme @list-item--programme

List-Item Programme with Quickinfo @list-item--quickinfo

List-Item Programme with Quickinfo "Finished" @list-item--finished

List-Item mit Kontakt @list-item--contact

List-Item mit Kontakt Logo @list-item--contact-logo

List-Item mit Download @list-item--download

List-Item mit Download @list-item--tooltip

List-Item mit Prozentanzeige @list-item--percentage