---
title:                                  Roundtrip
tagline:                                Cards, compact content previews
description:                            J1 Template Roundtrip - Cards, compact content previews

tags:                                   [ Template, Roundtrip, Cards ]
index:                                  []
categories:                             [ pages ]

permalink:                              /pages/public/start/roundtrip/cards/
regenerate:                             false

resources:                              []
resource_options:
  - masthead:
      opacity:                          0.2
      slides:
        - url:                          /assets/images/pages/roundtrip/cards-1920.jpg
          alt:                          Photo by Jack Hamilton on Unsplash
          caption:                      Photo by Jack Hamilton on Unsplash
          caption_href:                 https://unsplash.com/@jacc
          caption_color:                rgba(255, 255, 255, 0.8)
---

// Enable the Liquid Preprocessor
// -----------------------------------------------------------------------------
:page-liquid:

// Set other global page attributes here
// -------------------------------------------------------------------


{% comment %} Liquid procedures
--------------------------------------------------------------- {% endcomment %}
{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}


// NOTE: Initialize entry document paths
// -----------------------------------------------------------------------------
{% include {{set_env_entry_document}} init_folders=all %}

// Load tags and urls
// -----------------------------------------------------------------------------
include::{includedir}/attributes.asciidoc[tag=tags]
include::{includedir}/attributes.asciidoc[tag=urls]
include::{includedir}/attributes.asciidoc[tag=data]

// Additional Asciidoc page attributes goes here
// -----------------------------------------------------------------------------

A card is a sheet of material that serves as an entry point to more detailed
information. Cards may contain a photo, text, and a link about a single subject.
They may display content containing elements of varying size, such as photos
with captions of variable length.

== Plain Cards

lorem:sentences[5]

=== Text Cards

lorem:sentences[5]

lorem:sentences[2]

++++
  <div class="row mb-5">

    <div class="col-md-6 mt-3">
      <div class="card">
        <div class="content content-warning">
          <h5 class="notoc category-social">
            <i class="mdi mdi-information-outline"></i> The Next Web
          </h5>
          <h4 class="notoc card-title">
            <a href="#">"Focus on Your Employees"</a>
          </h4>
          <p class="card-description">
            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 class="footer text-center">
            <a href="#" class="btn btn-secondary mt-1 mb-2">
              <i class="mdi mdi-blogger"></i> Read Article
            </a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6 mt-3">
      <div class="card">
        <div class="content content-info">
          <h5 class="notoc category-social">
            <i class="mdi mdi-twitter"></i> Twitter
          </h5>
          <h4 class="notoc card-title">
            <a href="#">"Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore."</a>
          </h4>
          <div class="footer mt-5 mb-2">
            <div class="author">
              <a href="#">
                <img class="avatar img-raised" src="/assets/images/md-kit/avatar.jpg" alt="image avatar.jpg" >
                <span>Tania Andrew</span>
              </a>
            </div>
            <div class="stats">
              <i class="mdi mdi-heart"></i> 2.4K · <i class="mdi mdi-share"></i> 45
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
++++


=== Background Cards

lorem:sentences[5]

++++
<div class="row mb-5">

  <div class="col-md-6 mt-3">
    <div class="card card-background" style="background-image: url('/assets/images/md-kit/office1.jpg')">
      <div class="content">
        <h6 class="notoc category text-info">Productivy Apps</h6>
        <a href="#">
          <h3 class="notoc card-title">The Best Productivity Apps on Market</h3>
        </a>
        <p class="card-description">
          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>
        <a href="#" class="btn btn-info btn-round btn-raised mt-1 mb-1">
        <i class="mdi mdi-blogger"></i> Read Article
        </a>
        <a href="#" class="btn btn-info btn-round btn-raised">
        <i class="mdi mdi-timer"></i> Watch Later
        </a>
      </div>
    </div>
  </div>

  <div class="col-md-6 mt-3">
    <div class="card card-background" style="background-image: url('/assets/images/md-kit/card-blog3.jpg')">
      <div class="content">
        <h6 class="notoc category text-info">Materials</h6>
        <h3 class="notoc card-title">The Sculpture Where Details Matter</h3>
        <p class="card-description">
          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>
        <a href="#" class="btn btn-danger btn-round btn-raised mb-1">
        <i class="mdi mdi-blogger"></i> Read Article
        </a>
      </div>
    </div>
  </div>

</div>
++++


== Image Cards

lorem:sentences[5]

lorem:sentences[3]


=== Image Header Cards

lorem:sentences[5]

++++
  <div class="row mb-5">

    <div class="col-md-6 mt-3">
      <div class="card card-blog">

        <div class="card-image">
          <a href="#">
            <img class="img" src="/assets/images/md-kit/blog5.jpg" alt="image blog5.jpg">
          </a>
        </div>

        <div class="content">

          <div class="card-title">
            This Summer Will be Awesome
          </div>

          <h5 class="notoc category text-info">Fashion</h5>
          <p class="card-description">
            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>

    <div class="col-md-6 mt-3">
      <div class="card card-blog card-plain">
        <div class="card-image">
          <a href="#">
          <img class="img" src="/assets/images/md-kit/blog5.jpg" alt="image blog5.jpg">
          </a>

        </div>
        <div class="content">
          <div class="card-title">
            This Summer Will be Awesome
          </div>
          <h5 class="notoc category text-info">Fashion</h5>
          <p class="card-description">
            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>

  </div>
++++

=== Image Header Cards + Actions

lorem:sentences[5]

++++
  <div class="row mt-3 mb-5">

    <div class="col-md-6 mt-3">
      <div class="card">
        <div class="card-height-indicator"></div>
        <div class="card-content">
          <div class="card-image">
            <img src="/assets/images/carousel/cats/cat-2.jpg" alt="image cat-2.jpg">
            <h3 class="notoc card-image-headline">Scharfe Katz</h3>
          </div>
          <div class="card-body">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
          <footer class="card-footer">
            <button class="btn btn-flat">Share</button>
            <button class="btn btn-flat btn-primary">Learn More</button>
          </footer>
        </div>
      </div>
    </div>
     <div class="col-md-6 mt-3">
      <div class="card card-plain">
        <div class="card-height-indicator"></div>
        <div class="card-content">
          <div class="card-image">
            <img src="/assets/images/carousel/cats/cat-8.jpg" alt="image cat-8.jpg">
            <h3 class="notoc card-image-headline">Nette Katz</h3>
          </div>
          <div class="card-body">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
          <footer class="card-footer">
            <button class="btn btn-flat">Share</button>
            <button class="btn btn-flat btn-primary">Learn More</button>
          </footer>
        </div>
      </div>
    </div>

  </div>
++++

=== Profile Cards

lorem:sentences[5]

lorem:sentences[2]

++++
    <div class="row mb-5">
      <div class="col-md-4">
        <div class="card card-profile">
          <div class="card-image">
            <a href="#">
            <img class="img" src="/assets/images/md-kit/card-profile4.jpg" alt="image card-profile4.jpg">
            </a>
          </div>
          <div class="content">
            <h4 class="notoc card-title">Mia Müller-Fusch</h4>
            <h6 class="notoc category text-info">Web Designer</h6>
            <p class="card-description">
              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 class="footer">
              <a href="#" class="btn btn-just-icon btn-simple btn-twitter"><i class="fab fa-twitter"></i></a>
              <a href="#" class="btn btn-just-icon btn-simple btn-dribbble"><i class="fab fa-dribbble"></i></a>
              <a href="#" class="btn btn-just-icon btn-simple btn-instagram"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
      </div>
      </div>
      <div class="col-md-4">
        <div class="card card-profile">
          <div class="card-image">
            <a href="#">
            <img class="img" src="/assets/images/md-kit/card-profile1.jpg" alt="image card-profile1.jpg">
            </a>
          </div>
          <div class="content">
            <h4 class="notoc card-title">Jupp Schmitz</h4>
            <h6 class="notoc category text-gray">CEO &#xB7; Co-Founder</h6>
            <div class="footer">
              <ul class="social-icons">
                <li><a href="#" data-original-title="Facebook" class="rounded-circle social_facebook"></a></li>
                <li><a href="#" data-original-title="Twitter" class="rounded-circle social_twitter"></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card card-profile">
          <div class="card-avatar">
            <a href="#">
            <img class="img" src="/assets/images/md-kit/marc.jpg" alt="image marc.jpg">
            </a>
          </div>
          <div class="content">
            <h4 class="notoc card-title">Heini Vorderseer</h4>
            <h6 class="notoc category text-gray">CEO &#xB7; Co-Founder</h6>
            <p class="card-description">
              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>
            <a href="#" class="btn btn-info btn-round btn-raised">Follow</a>
          </div>
        </div>
      </div>
    </div>
++++

=== Blog Cards

lorem:sentences[4]

++++
  <div class="row mb-5">

    <div class="col-md-6 mt-3">
      <div class="card card-blog">
        <div class="card-image">
          <a href="#">
          <img class="img" src="/"pages/roundtrip/meeting.jpg" alt="image img12.jpg">
          </a>
        </div>
        <div class="content">
          <h5 class="notoc category text-success">
            <i class="mdi mdi-scale-balance"></i> Legal
          </h5>
          <h4 class="notoc card-title">
            <a href="#">5 Common Legal Mistakes That Can Trip-Up Your Startup</a>
          </h4>
          <p class="card-description">
            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 class="footer">
            <div class="author">
              <a href="#">
                <img class="avatar img-raised" src="/assets/images/md-kit/marc.jpg" alt="image mark.jpg">
              <span>Mike John</span>
              </a>
            </div>
            <div class="stats">
              <i class="mdi mdi-timer"></i> 5 min read
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6 mt-3">
      <div class="card card-blog card-plain">
        <div class="card-image">
          <a href="#">
            <img class="img" src="/assets/images/master_header/stefan-stefancik-1280x800.png" alt="image stefan-stefancik-1200.jpg" >
          </a>
        </div>
        <div class="content">
          <h5 class="notoc category text-danger">
            <i class="mdi mdi-trending-up"></i> Trending
          </h5>
          <h4 class="notoc card-title">
            <a href="#">To Grow Your Business Start Focusing on Your Employees</a>
          </h4>
          <div class="footer">
            <div class="author">
              <a href="#">
                <img class="avatar img-raised" src="/assets/images/md-kit/marc.jpg" alt="image mark.jpg">
              <span>Mike John</span>
              </a>
            </div>
            <div class="stats">
              <i class="mdi mdi-timer"></i> 5 min read
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
++++


== Fact Cards

lorem:sentences[5]

lorem:sentences[2]

++++
    <div class="row mt-3 mb-5">

      <div class="col-md-4">
        <div class="card card-profile">
          <div class="card-icon">
            <a href="#">
              <i class="card-icon-circle raised mdi mdi-responsive mdi-5x mdi-md-indigo-50 card-icon-background-color-theme card-icon-mdi"></i>
            </a>
          </div>
          <div class="content">
            <h6 class="notoc category text-gray">J1 Template</h6>
            <h4 class="notoc card-title">Voll Responsive</h4>
            <p class="card-description">
              Das Web ist überall. J1 Template unterstützt jede Hardware.
              Für beste Ergebnisse auf PCs, Tablets and SmartPhones.
            </p>
            <p class="card-description">
              <i>Folgen Sie Ihren Besuchern.</i>
            </p>
            <a href="#" class="btn btn-info btn-round btn-raised">Mehr Lesen</a>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card card-profile">
          <div class="card-icon">
            <a href="#">
              <i class="card-icon-circle raised mdi mdi-language-html5 mdi-5x mdi-md-indigo-50 card-icon-background-color-theme card-icon-mdi"></i>
            </a>
          </div>
          <div class="content">
            <h6 class="notoc category text-gray">J1 Template</h6>
            <h4 class="notoc card-title">HTML5 &#xB7; CSS3 &#xB7; JS</h4>
            <p class="card-description">
              Gutes Design, aktuelle Technologie. Präsentieren Sie Ihre
              Produkte, Projekte, Dienstleistungen und Ihr Team besonders.
            </p>
            <p class="card-description">
              <i>Machen Sie Ihre Site einzigartig.</i>
            </p>
            <a href="#" class="btn btn-info btn-round btn-raised">Mehr Lesen</a>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card card-profile">
          <div class="card-icon">
            <a href="#">
              <i class="card-icon-circle raised mdi mdi-clock mdi-5x mdi-md-indigo-50 card-icon-background-color-theme card-icon-mdi"></i>
            </a>
          </div>
          <div class="content">
            <h6 class="notoc category text-gray">J1 Template</h6>
            <h4 class="notoc card-title">Sofort Starten</h4>
            <p class="card-description">
              Programmierung ist nicht nötig. Eine große Zahl an fertigen
              Komponenten steht Ihnen zur Verfügung die den Job erledigen.
            </p>
            <p class="card-description">
              <i>Konfigurieren was nötig ist.</i>
            </p>
            <a href="#" class="btn btn-info btn-round btn-raised">Mehr Lesen</a>
          </div>
        </div>
      </div>

    </div>
++++


== Nav Cards

lorem:sentences[4]

=== Tabs

lorem:sentences[5]

++++
<div class="row mb-4">

  <div class="col-md-6 mt-3">
    <h3 class="notoc"><small>Tabs on Plain Card</small></h3>
    <!-- Tabs on Plain Card -->
    <div class="card card-nav-tabs card-plain">
      <div class="header header-danger">
        <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
        <div class="nav-tabs-navigation">
          <div class="nav-tabs-wrapper">
            <ul class="nav nav-tabs" data-tabs="tabs">
              <li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>
              <li class="nav-item"><a class="nav-link" href="#updates" data-toggle="tab">Updates</a></li>
              <li class="nav-item"><a class="nav-link" href="#history" data-toggle="tab">History</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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 class="tab-pane" id="updates">
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.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 class="tab-pane" id="history">
            <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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>
    </div>
  </div> <!-- End Tabs on plain Card -->

  <div class="col-md-6 mt-3">
    <h3 class="notoc"><small>Tabs with Icons on Plain Card</small></h3>
    <!-- Tabs with icons on Card -->
    <div class="card card-nav-tabs">
      <div class="header header-success">
        <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
        <div class="nav-tabs-navigation">
          <div class="nav-tabs-wrapper">
            <ul class="nav nav-tabs" data-tabs="tabs">
              <li class="nav-item">
                <a class="nav-link active" href="#profile" data-toggle="tab">
                <i class="mdi mdi-face mdi-lg mr-1"></i>
                <!-- i class="material-icons">face</i -->
                Profile
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#messages" data-toggle="tab">
                <i class="mdi mdi-comment-text mdi-lg mr-1"></i>
                <!-- i class="material-icons">chat</i -->
                Messages
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#settings" data-toggle="tab">
                <i class="mdi mdi-wrench mdi-lg mr-1"></i>
                <!-- i class="material-icons">build</i -->
                Settings
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="tab-content">
          <div class="tab-pane active" id="profile">
            <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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 class="tab-pane" id="messages">
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.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 class="tab-pane" id="settings">
            <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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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>
    </div>
  </div>  <!-- End Tabs with icons on Card -->

</div>
++++

=== Accordion

lorem:sentences[4]

++++
  <div class="row mb-5">

    <div class="col-md-6 mt-3">
      <h3 class="notoc"><small>Accordion on a Image Card</small></h3>
      <div class="card card-blog">

        <div class="card-image">
          <a href="#">
            <img class="img" src="/assets/images/md-kit/blog5.jpg" alt="image blog5.jpg">
          </a>
        </div>

        <div class="content">

          <div class="card-title mb-3">Image Card Title</div>
          <p class="card-description">
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>

          <div id="accordion-1" class="panel-group" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne-1-1">
                <h5 class="notoc mb-0">
                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseOne-1-1" aria-expanded="false" aria-controls="collapseOne-1-1">
                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
                    Group #1
                  </a>
                </h5>
              </div>
              <div id="collapseOne-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne-1-1" aria-expanded="false" style="height: 0px;">
                <div class="panel-body ml-3">
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Sed diam nonumy eirmod tempor invidunt ut
                  labore et dolore magna aliquyam erat, sed diam voluptua.

                  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Sed
                  diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo-1-1">
                <h5 class="notoc mb-0">
                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseTwo-1-1" aria-expanded="false" aria-controls="collapseTwo-1-1">
                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
                    Group #2
                  </a>
                </h5>
              </div>
              <div id="collapseTwo-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1-1" aria-expanded="false" style="height: 0px;">
                <div class="panel-body ml-3">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
                  officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

                  Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                  Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
                  excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
                  nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingThree-1-1">
                <h5 class="notoc mb-0">
                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseThree-1-1" aria-expanded="false" aria-controls="collapseThree-1-1">
                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
                    Group #3
                  </a>
                </h5>
              </div>
              <div id="collapseThree-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1-1" aria-expanded="false">
                <div class="panel-body ml-3">
                  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                  sed diam nonumy eirmod tempor invidunt.Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>

    <div class="col-md-6 mt-3">
      <h3 class="notoc"><small>Accordion on a Plain Card</small></h3>
      <div class="card card-blog">

        <div class="content">

          <div class="card-title mb-3">Plain Card Title</div>
          <p class="card-description">
            Card Description: 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 id="accordion-2" class="panel-group" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne-1-2">
                <h5 class="notoc mb-0">
                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-2" href="#collapseOne-1-2" aria-expanded="false" aria-controls="collapseOne-1-2">
                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
                    Group #1
                  </a>
                </h5>
              </div>
              <div id="collapseOne-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne-1-2" aria-expanded="false" style="height: 0px;">
                <div class="panel-body ml-3">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo-1-2">
                <h5 class="notoc mb-0">
                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-2" href="#collapseTwo-1-2" aria-expanded="false" aria-controls="collapseTwo-1-2">
                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
                    Group #2
                  </a>
                </h5>
              </div>
              <div id="collapseTwo-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1-2" aria-expanded="false" style="height: 0px;">
                <div class="panel-body ml-3">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingThree-1-2">
                <h5 class="notoc mb-0">
                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-2" href="#collapseThree-1-2" aria-expanded="false" aria-controls="collapseThree-1-2">
                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
                    Group #3
                  </a>
                </h5>
              </div>
              <div id="collapseThree-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1-2" aria-expanded="false">
                <div class="panel-body ml-3">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>

  </div>

  <script>
    // See: https://www.bootply.com/89084
    $('.collapse').on('shown.bs.collapse', function(){
      $(this).parent().find('.mdi-plus-circle-outline').removeClass('mdi-plus-circle-outline').addClass('mdi-minus-circle-outline');
    })
    .on('hidden.bs.collapse', function(){
       $(this).parent().find('.mdi-minus-circle-outline').removeClass('mdi-minus-circle-outline').addClass('mdi-plus-circle-outline');
    });
  </script>

++++

== What's next?

You've found cards for your web that fit your needs? If so, really great.

Content counts - no way. If a page is opened, yes a great one, the very first
what your vistors will see is what is top most on a page - a header. A header
is somewhat like an intro. Very important to make a reader feel right on a
page. Or interested to go for reading.

Beside simple text headers, J1 support *Image Headers* using pictures or videos.
To create eye-catching headers no expensive software is needed.

What? Find out how it works: link:{roundtrip-typography}[J1 Typography].