twigfiddle.com - Fiddle eegs20 v1 - Created on August 18, 2017 13:48

File

awd

File

<a href="{{ button_link }}" class="button {{ button_style }} ">{{ button_text }}
    <img src="{{ button_icon }}" alt="button-icon">
</a>

File

<div class="card" style="width: 300px;">
{% if not with_button %}
  <a href="{{ link }}" class="card--link">
{% endif %}
      <div class="card-divider">
        {{ prefix }}
      </div>
      <img src="{{ image }}" style="max-width: 100%;">
      <div class="card-section">
        <h4>{{ title }}</h4>
        <p>{{ text }}</p>
      </div>  
{% if not with_button %}
  </a>
{% else %}
      <div class="card-section">
          <a href="{{ button_link }}" class="button expanded  {{ button_style }}">{{ button_text }}
              <img src="http://lorempixel.com/50/50" alt="button-icon">
          </a>
      </div>
  {% endif %}
</div>

File

<ul class="accordion" data-accordion>
    {% for akk in akkordeon %}
    <li class="accordion-item" data-accordion-item>
    
      <a href="#" class="accordion-title">{{ akk.title }}</a>
 
      <div class="accordion-content" data-tab-content>
      {% for item in akk.content %}
          {% if item.acf_fc_layout == "text_layout" %}
              <p>{{ item.text }}</p>
          {% else %}
              <img src="{{ image }}" alt="akkordeon-image">
          {% endif %}
      {% endfor %}
      </div>
    </li>
    {% endfor %}
</ul>

File

<div class="card adress" style="width: 300px;">
  <p class="company">{{ adress_firm }}</p>
  <p class="contact-person">{{ adress_name }}</p>
  <p class="street">{{ adress_street }}</p>
  <p class="post-code">{{ address_post_code }}</p>
  <p class="city">{{ address_location }}</p>
  <p class="country">{{ address_country }}</p>
  <p class="phone"><a href="tel:{{address_phone}}">{{address_phone}}</a></p>
  <p class="fax"><a href="fax:{{address_fax}}">{{address_fax}}<span class="fax_suffix">(Fax)</span></a></p>
  <p class="mail"><a href="mailto:{{adress_email}}">{{adress_email}}</a></p>
  <p class="website"><a href="{{adress_url}}" target="_blank">{{adress_url}}</a></p>
</div>

File

<h2>{{ download_title }}</h2>
<div class="columns medium-12">
  <table class="downloads">
    <thead class="downloads_head">
      <tr>
        <th>Dateiname</th>
        <th>Dateityp</th>
        <th>Dateigrösse</th>
        <th class="icon_cells">Icon</th>
        <th>Download</th>
      </tr>
    </thead>
    <tbody>    
    {% for row in download_table %}
        <tr class="download_item">
          <td>{{ row.file_name }}</td>   
          <td>{{ row.file.file_type }}</td>      
          <td>{{ row.file.file_size }}</td>       
          <td><img src="{{ row.download_icon }}" alt="file_format"></td>       
          <td><a class="button no-margin expanded" download href="http://www.defendersblog.org/wp-content/uploads/2010/09/kclynx5-wm-300x237.jpg">Download</a></td>        
        </tr>
      {% endfor %}     
    </tbody>
  </table>
</div>

Format

prefix: This is a header
image: http://lorempixel.com/400/200
title: The Card Title
text: this card is now twig compatible!
with_button: true
link: http://www.google.ch

button_text: WEITER
button_link: http://www.yahoo.ch
button_icon: http://lorempixel.com/50/50
button_style: primary



adress_firm: Cubetech
adress_name: Michel Gross
adress_street: lagerhausweg 30
address_post_code: 3018
address_location: Bümpliz Süd
address_country: Schweiz
address_phone: "0320000000"
address_fax: "0321111111"
adress_email: info@cubetech.ch
adress_url: https://www.cubetech.ch
adress_google: -


# Akkordeon:

'akkordeon':
    '0':
      title:    t1
      'content':
          '0':
              acf_fc_layout: text_layout
              text: c1
          '1':
              acf_fc_layout: image_layout
              image: http://lorempixel.com/400/200
              
    '1':
      title:    t2
      'content':
          '0':
              acf_fc_layout: image_layout
              image: http://lorempixel.com/400/200
          
#Button
button_text: WEITER #is overritten by the "kartei" values, comment out to get correct values
button_link: bagaagagaagagag
button_icon: http://lorempixel.com/400/200 #url of button_icon
button_style: primary


#Download-Tabelle
download_title: downloads
'download_table':
    '0':
      file_name: filename
      download_icon: http://lorempixel.com/50/50
      'file':
          file_type: svg
          file_size: 200MB
          file_url: /its/around/here/somwhere
    '1': 
      file_name: filename2
      download_icon: http://lorempixel.com/50/50
      'file':
          file_type: png
          file_size: 250MB
          file_url: /its/around/here/somwhere/i/think