Styleguide

Cards

Schematic structure

      

      main // Content Area
      ├── section .content-section // Content opener for a new content topic
      │    ╰── .content-section--inner
      │          ├── h2 // clean Seo Content Structures
      │          ├── h3
      │          ├── p
      │          ├── ul
      │          ╰── ...
      ├── section .content-section // add Backgroundcolor for the CARDS Widget
      │     ╰── .content-section--inner
      │          ├── h2 
      │          ├── h3
      │          ├── p
      │          ├── grid // CARDS Widget setup for 1,2 or 3 Columns
      │          │    ├── gesis-card
      │          │    │    ╰── gesis-card--content
      │          │    │         ├── h3
      │          │    │         ├── p
      │          │    │         ╰── ...
      │          │    ├── gesis-card
      │          │    │    ╰── gesis-card--content
      │          │    │         ├── h3
      │          │    │         ├── p
      │          │    │         ╰── ...
      │          │    ├── gesis-card
      │          │    │    ╰── gesis-card--content
      │          │    │         ╰── ...
      │          │    ├── gesis-card
      │          │    │    ╰── gesis-card--content
      │          │    │         ╰── ...
      │          │    ├── gesis-card
      │          │    │     ╰── gesis-card--content
      │          │    │         ╰── ...
      │          │    ╰── ...
      │          ├── h2
      │          ├── h3
      │          ├── p
      │          ├── ul
      │          ╰── ...
      ╰── //  As many content section as required


HTML-Basis

Für die Verwendung der Cards sollte die Hintergrundfarbe der section, in den das Cards-Grid eingebettet ist, geändert werden. Bevorzugt wird gs-lightblue--14 oder gs-default-grey. Alternativ gs-darkblue--14 oder gs-berry--14. Andere Farben wären möglich, sollten aber mit dem Styleguide-Team abgestimmt werden. Mehr als 2 Farbvarianten auf einer Seite sind nicht vorgesehen.

---

To use the cards, the background color of the section in which the cards grid is embedded should be changed. The preferred variants would be gs-lightblue--14 or gs-default-grey. Alternatively gs-darkblue--14 or gs-berry--14. Other colors would be possible but should be coordinated with the Styleguide team. More than 2 color variants on one side are not planned.

<section id="..." class="content-section has-bg-color gs-lightblue--14">
    <!-- Preferred background colors:
         1: gs-default-grey 
         2: gs-lightblue--14 
         3: gs-darkblue--14 
         4: gs-berry--14
    !-->
  <div class="content-section--inner">
    ...

    <div class="grid" style="--bs-columns: 3">
      <!-- --bs-columns: [3, 2 or 1 for different numbers of columns] !-->

      <div class="gesis-card h-100">
        <div class="gesis-card--content">...</div>
      </div>

      <div class="gesis-card h-100">
        <div class="gesis-card--content">...</div>
      </div>

      <div class="gesis-card h-100">
        <div class="gesis-card--content">...</div>
      </div>

      ...
    </div>

    ...
  </div>
</section>

1 Columns Vertical Cards Example

HTML Syntax

<!-- main !-->
<!-- section !-->
<!-- content-section--inner !-->

<!-- The Cards widget is always embedded within this Main and Section structure !-->
<!-- Before: Possibly other components, widgets or simply content syntax !-->

<div class="grid" style="--bs-columns: 1">
  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Forschung auf neuen Wegen</h3>
      <p>
        In der Welt der modernen Forschung haben innovative Methoden die Art und
        Weise, wie Daten gesammelt und analysiert werden, revolutioniert. Unsere
        Plattform bietet Ihnen die Möglichkeit, umfassende, zufallsbasierte
        Daten zu erheben, die sowohl für repräsentative Proben als auch für
        digitale Verhaltensanalysen genutzt werden können.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Mehr erfahren </a>
      </p>
    </div>
  </div>

  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Neue Perspektiven in der Forschung</h3>
      <p>
        Mit der Integration fortschrittlicher Technologien in die Datenakquise
        schaffen wir neue Wege, um die Dynamiken menschlichen Verhaltens zu
        erfassen und zu analysieren. Unsere Tools bieten eine umfassende
        Datensammlung, die für verhaltenswissenschaftliche Studien genutzt
        werden kann.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Entdecken Sie mehr </a>
      </p>
    </div>
  </div>

  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Erforschen Sie neue Datenwelten</h3>
      <p>
        Unsere innovativen Ansätze im Bereich der Datenforschung bieten Ihnen
        unzählige Möglichkeiten, die neuesten digitalen Trends zu nutzen und
        Ihre eigenen Datensätze zu generieren. Ob für wissenschaftliche oder
        kommerzielle Zwecke, wir bieten die Werkzeuge, die Sie brauchen.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Weitere Infos </a>
      </p>
    </div>
  </div>
</div>

<!-- After: Possibly other components, widgets or simply content syntax !-->
<!-- END of the Main and Section structure !-->

<!-- END content-section--inner wrapper !-->
<!-- END section wrapper !-->
<!-- END main wrapper !-->

Browser Preview

Forschung auf neuen Wegen

In der Welt der modernen Forschung haben innovative Methoden die Art und Weise, wie Daten gesammelt und analysiert werden, revolutioniert. Unsere Plattform bietet Ihnen die Möglichkeit, umfassende, zufallsbasierte Daten zu erheben, die sowohl für repräsentative Proben als auch für digitale Verhaltensanalysen genutzt werden können.

Mehr erfahren

Neue Perspektiven in der Forschung

Mit der Integration fortschrittlicher Technologien in die Datenakquise schaffen wir neue Wege, um die Dynamiken menschlichen Verhaltens zu erfassen und zu analysieren. Unsere Tools bieten eine umfassende Datensammlung, die für verhaltenswissenschaftliche Studien genutzt werden kann.

Entdecken Sie mehr

Erforschen Sie neue Datenwelten

Unsere innovativen Ansätze im Bereich der Datenforschung bieten Ihnen unzählige Möglichkeiten, die neuesten digitalen Trends zu nutzen und Ihre eigenen Datensätze zu generieren. Ob für wissenschaftliche oder kommerzielle Zwecke, wir bieten die Werkzeuge, die Sie brauchen.

Weitere Infos

2 Columns horizontale Cards Example

HTML Syntax

<!-- main !-->
<!-- section !-->
<!-- content-section--inner !-->

<!-- The Cards widget is always embedded within this Main and Section structure !-->
<!-- Before: Possibly other components, widgets or simply content syntax !-->

<div class="grid" style="--bs-columns: 2">

  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Forschung auf neuen Wegen</h3>
      <p>
        In der Welt der modernen Forschung haben innovative Methoden die Art und
        Weise, wie Daten gesammelt und analysiert werden, revolutioniert. Unsere
        Plattform bietet Ihnen die Möglichkeit, umfassende, zufallsbasierte
        Daten zu erheben, die sowohl für repräsentative Proben als auch für
        digitale Verhaltensanalysen genutzt werden können.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Mehr erfahren </a>
      </p>
    </div>
  </div>

  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Neue Perspektiven in der Forschung</h3>
      <p>
        Mit der Integration fortschrittlicher Technologien in die Datenakquise
        schaffen wir neue Wege, um die Dynamiken menschlichen Verhaltens zu
        erfassen und zu analysieren. Unsere Tools bieten eine umfassende
        Datensammlung, die für verhaltenswissenschaftliche Studien genutzt
        werden kann.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Entdecken Sie mehr </a>
      </p>
    </div>
  </div>

  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Erforschen Sie neue Datenwelten</h3>
      <p>
        Unsere innovativen Ansätze im Bereich der Datenforschung bieten Ihnen
        unzählige Möglichkeiten, die neuesten digitalen Trends zu nutzen und
        Ihre eigenen Datensätze zu generieren. Ob für wissenschaftliche oder
        kommerzielle Zwecke, wir bieten die Werkzeuge, die Sie brauchen.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Weitere Infos </a>
      </p>
    </div>
  </div>
  
</div>

<!-- After: Possibly other components, widgets or simply content syntax !-->
<!-- END of the Main and Section structure !-->

<!-- END content-section--inner wrapper !-->
<!-- END section wrapper !-->
<!-- END main wrapper !-->

Browser Preview

Forschung auf neuen Wegen

In der Welt der modernen Forschung haben innovative Methoden die Art und Weise, wie Daten gesammelt und analysiert werden, revolutioniert. Unsere Plattform bietet Ihnen die Möglichkeit, umfassende, zufallsbasierte Daten zu erheben, die sowohl für repräsentative Proben als auch für digitale Verhaltensanalysen genutzt werden können.

Mehr erfahren

Neue Perspektiven in der Forschung

Mit der Integration fortschrittlicher Technologien in die Datenakquise schaffen wir neue Wege, um die Dynamiken menschlichen Verhaltens zu erfassen und zu analysieren. Unsere Tools bieten eine umfassende Datensammlung, die für verhaltenswissenschaftliche Studien genutzt werden kann.

Entdecken Sie mehr

Erforschen Sie neue Datenwelten

Unsere innovativen Ansätze im Bereich der Datenforschung bieten Ihnen unzählige Möglichkeiten, die neuesten digitalen Trends zu nutzen und Ihre eigenen Datensätze zu generieren. Ob für wissenschaftliche oder kommerzielle Zwecke, wir bieten die Werkzeuge, die Sie brauchen.

Weitere Infos

3 Columns horizontale Cards Example

HTML Syntax

<!-- main !-->
<!-- section !-->
<!-- content-section--inner !-->

<!-- The Cards widget is always embedded within this Main and Section structure !-->
<!-- Before: Possibly other components, widgets or simply content syntax !-->

<div class="grid" style="--bs-columns: 3">
  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Forschung auf neuen Wegen</h3>
      <p>
        In der Welt der modernen Forschung haben innovative Methoden die Art und
        Weise, wie Daten gesammelt und analysiert werden, revolutioniert. Unsere
        Plattform bietet Ihnen die Möglichkeit, umfassende, zufallsbasierte
        Daten zu erheben, die sowohl für repräsentative Proben als auch für
        digitale Verhaltensanalysen genutzt werden können.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Mehr erfahren </a>
      </p>
    </div>
  </div>

  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Neue Perspektiven in der Forschung</h3>
      <p>
        Mit der Integration fortschrittlicher Technologien in die Datenakquise
        schaffen wir neue Wege, um die Dynamiken menschlichen Verhaltens zu
        erfassen und zu analysieren. Unsere Tools bieten eine umfassende
        Datensammlung, die für verhaltenswissenschaftliche Studien genutzt
        werden kann.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Entdecken Sie mehr </a>
      </p>
    </div>
  </div>

  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Erforschen Sie neue Datenwelten</h3>
      <p>
        Unsere innovativen Ansätze im Bereich der Datenforschung bieten Ihnen
        unzählige Möglichkeiten, die neuesten digitalen Trends zu nutzen und
        Ihre eigenen Datensätze zu generieren. Ob für wissenschaftliche oder
        kommerzielle Zwecke, wir bieten die Werkzeuge, die Sie brauchen.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Weitere Infos </a>
      </p>
    </div>
  </div>

  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Ihr Zugang zu hochwertigen Forschungsdaten</h3>
      <p>
        Unsere Plattform bietet Ihnen kostenlosen Zugang zu umfangreichen Daten,
        die Ihnen helfen, tiefere Einblicke in Ihr Forschungsgebiet zu erhalten.
        Nutzen Sie die Vorteile unserer Datenbanken, die auf den neuesten
        wissenschaftlichen Erkenntnissen basieren.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Jetzt mehr erfahren </a>
      </p>
    </div>
  </div>

  <div class="gesis-card h-100">
    <div class="gesis-card--content">
      <h3>Digitale Transformation in der Forschung</h3>
      <p>
        Mit unserer Plattform können Sie Daten erheben, die Ihnen helfen, ein
        tieferes Verständnis der digitalen Transformation und ihrer Auswirkungen
        auf Gesellschaft und Wirtschaft zu gewinnen. Unsere Werkzeuge sind
        speziell auf die Bedürfnisse moderner Forschungsprojekte abgestimmt.
      </p>
      <p>
        <a href="#" class="gesis-button--default"> Weitere Informationen </a>
      </p>
    </div>
  </div>
</div>

<!-- After: Possibly other components, widgets or simply content syntax !-->
<!-- END of the Main and Section structure !-->

<!-- END content-section--inner wrapper !-->
<!-- END section wrapper !-->
<!-- END main wrapper !-->

Browser Preview

Forschung auf neuen Wegen

In der Welt der modernen Forschung haben innovative Methoden die Art und Weise, wie Daten gesammelt und analysiert werden, revolutioniert. Unsere Plattform bietet Ihnen die Möglichkeit, umfassende, zufallsbasierte Daten zu erheben, die sowohl für repräsentative Proben als auch für digitale Verhaltensanalysen genutzt werden können.

Mehr erfahren

Neue Perspektiven in der Forschung

Mit der Integration fortschrittlicher Technologien in die Datenakquise schaffen wir neue Wege, um die Dynamiken menschlichen Verhaltens zu erfassen und zu analysieren. Unsere Tools bieten eine umfassende Datensammlung, die für verhaltenswissenschaftliche Studien genutzt werden kann.

Entdecken Sie mehr

Erforschen Sie neue Datenwelten

Unsere innovativen Ansätze im Bereich der Datenforschung bieten Ihnen unzählige Möglichkeiten, die neuesten digitalen Trends zu nutzen und Ihre eigenen Datensätze zu generieren. Ob für wissenschaftliche oder kommerzielle Zwecke, wir bieten die Werkzeuge, die Sie brauchen.

Weitere Infos

Ihr Zugang zu hochwertigen Forschungsdaten

Unsere Plattform bietet Ihnen kostenlosen Zugang zu umfangreichen Daten, die Ihnen helfen, tiefere Einblicke in Ihr Forschungsgebiet zu erhalten. Nutzen Sie die Vorteile unserer Datenbanken, die auf den neuesten wissenschaftlichen Erkenntnissen basieren.

Jetzt mehr erfahren

Digitale Transformation in der Forschung

Mit unserer Plattform können Sie Daten erheben, die Ihnen helfen, ein tieferes Verständnis der digitalen Transformation und ihrer Auswirkungen auf Gesellschaft und Wirtschaft zu gewinnen. Unsere Werkzeuge sind speziell auf die Bedürfnisse moderner Forschungsprojekte abgestimmt.

Weitere Informationen

How to use photos in Cards?

      

      main // Content Area
      ├── section .content-section // add Backgroundcolor for the CARDS Widget
      │     ╰── .content-section--inner
      │          ├── ... 
      │          ├── grid // CARDS Widget setup for 1,2 or 3 Columns
      │          │    ├── gesis-card .is-newscard
      │          │    │    ├── gesis-card--header
      │          │    │    │    ╰── img
      │          │    │    ╰── gesis-card--content
      │          │    │         ├── h3
      │          │    │         ├── p
      │          │    │         ├── ...
      │          │    │         ╰── a
      │          │    ├── gesis-card .is-newscard
      │          │    │    ╰── ...
      │          │    ├── gesis-card .is-newscard
      │          │    │    ╰── ...
      │          │    ╰── ...
      │          ├── h2
      │          ├── h3
      │          ├── p
      │          ├── ul
      │          ╰── ...
      ╰── //  As many content section as required


HTML-Basis Image Upgrade

Zwei wesentliche Punkte erweitern die Standard Card für die Verwendung von Fotos. Jede gesis-card erhält die Klasse is-newscard und eine zusätzliche div .gesis-card--header.

---

Two essential points extend the standard card for the use of photos. Each gesis-card gets the class is-newscard and another div .gesis-card--header.

<div class="grid" style="--bs-columns: 3">
  <div class="gesis-card is-newscard h-100">
    <div class="gesis-card--header">
        <img
          itemprop="thumbnail"
          src="..."
          width="..."
          height="..."
          alt="..."
        />
    </div>
    <div class="gesis-card--content">
      <h3 class="h4">Klimawandel und die Wissenschaft der Adaptation</h3>
      <p>
        <small>Angesichts der immer intensiveren Auswirkungen des Klimawandels werden innovative Ansätze zur Anpassung an neue Umweltbedingungen erörtert. Experten aus verschiedenen Disziplinen teilen ihre Perspektiven und Lösungsansätze.</small>
      </p>

      <a class="gesis-link--arrow-before" href="...">Weiterlesen</a>
    </div>
  </div>

  ...
</div>

3 Columns Photo Cards Preview

...

Zukunft der KI: Möglichkeiten und Herausforderungen

Eine neue Ära in der künstlichen Intelligenz beginnt. Forscher diskutieren die ethischen, gesellschaftlichen und technologischen Herausforderungen der KI-Integration in unsere tägliche Leben. Welche Potenziale bieten sich und wie können Risiken minimiert werden?

Weiterlesen
...

Nachhaltigkeit in der Technologiebranche

Die Technologiebranche steht an einem Wendepunkt: Wie können Innovationen vorangetrieben werden, ohne die Umwelt weiter zu belasten? Experten kommen zusammen, um Lösungen zu diskutieren, die eine nachhaltigere Zukunft ermöglichen.

Weiterlesen
...

Klimawandel und die Wissenschaft der Adaptation

Angesichts der immer intensiveren Auswirkungen des Klimawandels werden innovative Ansätze zur Anpassung an neue Umweltbedingungen erörtert. Experten aus verschiedenen Disziplinen teilen ihre Perspektiven und Lösungsansätze.

Weiterlesen

2 Columns Photo Cards Preview

...

Forschung auf neuen Wegen

In der Welt der modernen Forschung haben innovative Methoden die Art und Weise, wie Daten gesammelt und analysiert werden, revolutioniert. Unsere Plattform bietet Ihnen die Möglichkeit, umfassende, zufallsbasierte Daten zu erheben, die sowohl für repräsentative Proben als auch für digitale Verhaltensanalysen genutzt werden können.

Mehr erfahren

...

Neue Perspektiven in der Forschung

Mit der Integration fortschrittlicher Technologien in die Datenakquise schaffen wir neue Wege, um die Dynamiken menschlichen Verhaltens zu erfassen und zu analysieren. Unsere Tools bieten eine umfassende Datensammlung, die für verhaltenswissenschaftliche Studien genutzt werden kann.

Entdecken Sie mehr