Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section id="app">
  <div class="container">
    <div
         v-for="(card, i) in cards"
         :key="i"
         :id="generateCardId(i)"
         class="card">
      <div class="card-title">
        <div class="card-title--row">
          <template v-if="card.useHtml">
            <span class="card-title--content" v-html="card.title"/>
          </template>
          <template v-else>
            <span class="card-title--content" v-text="card.title"/>
          </template>
          <span class="card-title--end">
            <span>
              <a
                 :disabled="i === 0"
                 :href="generateCardId(i-1, true)"
                 class="btn-floating btn-small">
                <i class="material-icons">keyboard_arrow_up</i>
              </a>  
            </span>
            <span>
              <a
                 :disabled="i === cards.length - 1"
                 :href="generateCardId(i+1, true)"
                 class="btn-floating btn-small">
                <i class="material-icons">keyboard_arrow_down</i>
              </a>  
            </span>
          </span>
        </div>
        <div class="card-title--row">
          <ul class="tabs">
            <li class="tab">
              <a
                 :class="cardTabStates[i] === 0 ? 'active' : ''"
                 :href="generateCardId(i, true)"
                 @click="setTabIndexForCard(i, 0)">
                Tab 1
              </a>
            </li>
            <li class="tab">
              <a
                 :class="cardTabStates[i] === 1 ? 'active' : ''"
                 :href="generateCardId(i, true)"
                 @click="setTabIndexForCard(i, 1)">
                Tab 2
              </a>
            </li>
            <li class="tab">
              <a
                 :class="cardTabStates[i] === 2 ? 'active' : ''"
                 :href="generateCardId(i, true)"
                 @click="setTabIndexForCard(i, 2)">
                Tab 3
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="card-content">
        <!-- use default content -->
        <template v-if="cardTabStates[i] === 0">
          <template v-if="card.useHtml">
            <p v-for="(content, j) in card.content" :key="getContentKey(i,j)" v-html="content"/>
          </template>
          <template v-else>
            <p v-for="(content, j) in card.content" :key="getContentKey(i,j)" v-text="content"/>
          </template>
        </template>
        <!-- use content from the other side of the list -->
        <template v-else-if="cardTabStates[i] === 1">
          <template v-if="cards[cards.length - 1 - i].useHtml">
            <p v-for="(content, j) in cards[cards.length - 1 - i].content" :key="getContentKey(i,j)" v-html="content"/>
          </template>
          <template v-else>
            <p v-for="(content, j) in cards[cards.length - 1 - i].content" :key="getContentKey(i,j)" v-text="content"/>
          </template>
        </template>
        <!-- use content from about halfway through the list -->
        <template v-else-if="cardTabStates[i] === 2">
          <template v-if="cards[(Math.floor(cards.length / 2 + i)) % cards.length].useHtml">
            <p v-for="(content, j) in cards[(Math.floor(cards.length / 2 + i)) % cards.length].content" :key="getContentKey(i,j)" v-html="content"/>
          </template>
          <template v-else>
            <p v-for="(content, j) in cards[(Math.floor(cards.length / 2 + i)) % cards.length].content" :key="getContentKey(i,j)" v-text="content"/>
          </template>
        </template>
        <br>
        <div v-html="paragraph"/>
      </div>
    </div>
  </div>
</section>
              
            
!

CSS

              
                .container {
  display: flex;
  flex-direction: column;
}

.card-title {
  position: sticky;
  top: 0;
  display: flex;
  background: #ddd;
  flex-direction: column;
}

.card-title .tabs {
  background: #ddd!important;
  font-weight: bold;
}

.card-title--row {
  display: flex;
}

.card-title--content {
  padding-left: 0.5em;
  flex: auto;
}

.card-title--end {
  display: flex;
  justify-content: space-around;
  width: 5em;
}

.card-title--end > * {
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-title--end a {
  margin: 8px;
}

              
            
!

JS

              
                // made for https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/

// courtesy of https://www.lipsum.com/
const BASE_CARD_CONTENT = `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus, sem eu tincidunt porttitor, augue orci congue arcu, elementum placerat leo nunc in metus. Ut mattis id ligula eu tempus. Curabitur aliquet risus a ipsum fringilla, a aliquet mi bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ultricies massa et rutrum efficitur. Vivamus nec ipsum augue. Proin at purus quam. Pellentesque vehicula condimentum nisi. Vestibulum tempus ut urna at lobortis. Vivamus risus lectus, gravida a nulla vitae, suscipit pharetra leo. Phasellus in aliquam ligula, ac aliquet nulla. Morbi enim elit, tristique ac arcu eu, fringilla fermentum nisi. In in est ante. Integer ac tempor urna. Etiam consequat eleifend rutrum. Duis ultricies, dui vel malesuada ornare, erat mi feugiat lorem, in pharetra risus odio sed erat.</p>

<p>Nullam efficitur massa id eros vehicula, eget tempor est vehicula. Phasellus volutpat faucibus euismod. Nullam enim magna, posuere ac dictum sed, tristique in massa. Proin sit amet lorem sed nulla feugiat auctor. Ut vitae sollicitudin leo. Nunc nunc libero, rutrum ut elementum eu, dignissim vitae magna. Nunc non ante pretium, vulputate felis a, luctus massa. Donec in dolor id massa malesuada sollicitudin.</p>

<p>Aenean condimentum commodo erat vitae mattis. Suspendisse augue augue, iaculis ut ligula ut, malesuada fringilla massa. Suspendisse pretium, leo posuere hendrerit rhoncus, elit elit facilisis lectus, at tincidunt enim tellus sit amet nisl. Donec egestas in libero eu imperdiet. Duis viverra posuere metus, ut venenatis felis scelerisque sed. Maecenas ac nunc at purus euismod porttitor id eu lacus. Nam gravida erat sit amet erat auctor mattis. Mauris aliquet sapien enim, ut convallis dolor pellentesque at. Praesent cursus sollicitudin magna, et rhoncus mauris tristique et. Praesent lacinia ac augue elementum varius. Proin rhoncus, nisl et finibus pretium, mauris odio tristique metus, sed aliquet neque risus eu felis. Quisque tempor lorem sed elit pellentesque iaculis.</p>

<p>Vestibulum fringilla placerat purus, quis consequat lectus volutpat id. Aenean venenatis consectetur purus, sagittis sollicitudin nisi dictum ut. Vivamus vulputate odio nunc, ut tincidunt quam molestie et. Quisque vitae nunc est. Ut id augue placerat, suscipit purus in, commodo lorem. Nunc ultricies eros id nisi semper malesuada. Integer suscipit purus in felis pretium bibendum. Mauris ut ex vitae nisl bibendum faucibus sit amet vel est. Suspendisse sed tristique magna.</p>

<p>Phasellus lobortis elit vel lacus auctor, a maximus tellus porta. Nullam ut elementum libero. Curabitur maximus, ante nec facilisis scelerisque, orci velit volutpat purus, et sodales nibh quam nec diam. Donec lectus neque, viverra ac sagittis et, dictum eget diam. Curabitur nec leo sed lorem mattis convallis. Quisque tempor urna nec lorem facilisis, in feugiat lacus faucibus. Integer efficitur diam sit amet neque tempus, nec imperdiet ante sollicitudin. Nullam mattis ultrices imperdiet. Sed dignissim neque vel urna ornare, auctor sollicitudin ipsum molestie. Pellentesque ut rhoncus urna, quis vehicula nunc. Vestibulum pharetra lacus ac turpis finibus dignissim. Nullam et magna non sem mollis dictum eget in dui.</p>`;
const LOREM_IPSUM_DATA = [
  {
    "useHtml": true,
    "title": "Entry for <a href='https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/' target='_blank'>Weekly Coding Challenge</a>",
    "content": [
      'This week\'s theme is about navigation. For some context about my entry: A couple of my recent projects deal with showing some content in lists of cards like you see here. As a user would scroll down the list, they could lose contextual information like the title of the card and navigation for information within the card. Here, I have replicated the basic layout of that card list to a larger degree. I am experimenting with using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" target="_blank">the <code>position: sticky</code> property of CSS</a> to keep that contextual information about the card as well as keeping navigation controls visible. I am liking the end result of this entry. One minor issue is how to handle cases where the browser doesn\'t support sticky.',
      '<br>',
      'The pen makes use of <a href="https://materializecss.com/" target="_blank">Materialize CSS</a> for styling, the <a href="https://material.io/tools/icons/?style=baseline" target="_blank">Material Design Icon Set</a> for the up and down navigation icons, and <a href="https://vuejs.org/" target="_blank">Vue.js</a> for interaction handling and content display. Thanks to <a href="https://www.lipsum.com/" target="_blank">Lipsum Generator</a> for generating most of the text content on this page.'
    ]
  },
  {
    "title": "Nulla eu eros maximus velit lacinia fermentum.",
    "content": [
      "Donec faucibus lectus eu purus aliquet ultrices.",
      "Integer laoreet libero ac tristique tristique.",
      "Integer placerat tortor quis ligula suscipit, sit amet tempus ante tincidunt."
    ]
  },
  {
    "title": "Donec tincidunt eros vitae lorem luctus, quis sagittis leo lobortis.",
    "content": [
      "Phasellus sagittis mi id convallis eleifend.",
      "Nullam ullamcorper tortor et arcu congue interdum."
    ]
  },
  {
    "title": "Pellentesque dignissim erat euismod urna vestibulum, sed dapibus elit placerat.",
    "content": [
      "Phasellus condimentum velit vitae ex euismod, sed rutrum felis sagittis.",
      "Sed feugiat magna aliquet arcu tristique, at malesuada justo porta.",
      "Curabitur consectetur ipsum vel dolor fringilla, nec tincidunt felis tincidunt."
    ]
  },
  {
    "title": "Maecenas eu tortor feugiat, sollicitudin tellus eget, malesuada dui.",
    "content": [
      "Donec molestie nulla ac placerat mattis.",
      "Pellentesque sit amet arcu id tortor scelerisque suscipit ut convallis elit."
    ]
  },
  {
    "title": "Nulla tincidunt leo eu orci fermentum, nec sagittis diam rutrum.",
    "content": [
      "Mauris eu arcu volutpat nisl scelerisque scelerisque.",
      "Sed in sem a magna condimentum molestie eu aliquet lectus."
    ]
  },
  {
    "title": "Fusce at eros nec massa accumsan dictum.",
    "content": [
      "Vivamus eu urna pellentesque diam euismod scelerisque ac fringilla purus.",
      "Pellentesque cursus nisl non arcu suscipit, faucibus eleifend enim varius.",
      "Praesent ut ligula ut lacus porta suscipit vitae sed mauris.",
      "Aliquam vel magna at nulla fringilla iaculis."
    ]
  },
  {
    "title": "Mauris a orci accumsan, dignissim quam ac, sollicitudin nunc.",
    "content": [
      "Nullam scelerisque leo ut varius ornare.",
      "Proin ac tellus tristique, molestie velit in, ultricies ex.",
      "Aenean id lorem fringilla, sollicitudin sapien eget, pellentesque eros.",
      "Phasellus sed nisi malesuada, finibus sapien ac, aliquam sapien."
    ]
  },
  {
    "title": "Ut rutrum purus sit amet quam iaculis, a sagittis libero sagittis.",
    "content": [
      "In ornare lectus volutpat quam faucibus scelerisque.",
      "Integer et nisi in tortor ultricies facilisis.",
      "Sed vel risus sit amet eros molestie fringilla a sit amet nisl.",
      "Vestibulum pharetra velit ac ipsum sagittis viverra.",
      "Duis nec velit consectetur, sollicitudin mauris faucibus, efficitur nulla."
    ]
  },
  {
    "title": "Sed ac lacus pretium, commodo eros eget, ultricies augue.",
    "content": [
      "Proin gravida eros ac felis vulputate sodales.",
      "Vivamus mollis turpis quis commodo congue."
    ]
  },
  {
    "title": "Vestibulum suscipit enim ut viverra finibus.",
    "content": [
      "Ut et velit ac nunc euismod viverra et ac ex.",
      "Nullam dapibus purus et bibendum bibendum."
    ]
  },
  {
    "title": "Nulla vitae lacus euismod, tristique ligula id, dapibus dolor.",
    "content": [
      "Phasellus quis urna molestie, porttitor nisl et, eleifend urna.",
      "Phasellus id felis sed augue dictum imperdiet vitae eu felis.",
      "Vivamus lobortis diam a auctor vestibulum.",
      "Maecenas eleifend justo dignissim eros varius, vel blandit risus porttitor."
    ]
  },
  {
    "title": "Pellentesque semper enim eget sem euismod eleifend.",
    "content": [
      "Maecenas in nunc dictum, gravida velit dapibus, dignissim lacus.",
      "Integer mollis odio non neque maximus pulvinar.",
      "Aliquam ac massa in tellus euismod fringilla vel sit amet urna."
    ]
  },
  {
    "title": "Morbi nec eros placerat velit tincidunt finibus.",
    "content": [
      "Phasellus facilisis nunc eget felis laoreet, sit amet tincidunt felis condimentum.",
      "Nunc id magna facilisis, suscipit tellus quis, sodales risus.",
      "Sed vel ipsum auctor mi condimentum vulputate nec eu magna.",
      "Morbi sed diam malesuada, eleifend nibh quis, rhoncus ligula.",
      "Vestibulum vitae libero facilisis, commodo dolor quis, accumsan arcu."
    ]
  },
  {
    "title": "Nam lobortis turpis vel hendrerit elementum.",
    "content": [
      "Fusce placerat felis ut dolor auctor, vel tincidunt ipsum auctor.",
      "Pellentesque vulputate elit ut velit mollis lobortis.",
      "Aenean at enim hendrerit, rutrum tellus vel, viverra elit."
    ]
  },
  {
    "title": "Duis gravida quam ut ultricies iaculis.",
    "content": [
      "Suspendisse consectetur libero lobortis risus venenatis, eget molestie purus consectetur.",
      "Cras mattis magna molestie mattis eleifend.",
      "Phasellus sollicitudin ipsum eu erat tincidunt, a venenatis dolor egestas."
    ]
  },
  {
    "title": "Suspendisse suscipit magna a rhoncus consectetur.",
    "content": [
      "Maecenas at sapien sodales, imperdiet libero eget, aliquet nisi.",
      "Proin vitae nulla dignissim, venenatis urna vitae, molestie nisi.",
      "Nam rutrum eros a magna ullamcorper faucibus.",
      "Aenean feugiat lorem vitae arcu hendrerit porttitor."
    ]
  },
  {
    "title": "Cras in orci auctor, pharetra lorem ac, auctor velit.",
    "content": [
      "Pellentesque semper arcu vel lorem ullamcorper blandit.",
      "Fusce nec magna rutrum massa volutpat dictum vestibulum quis mi.",
      "Cras condimentum turpis a risus pellentesque dapibus."
    ]
  },
  {
    "title": "Duis vestibulum mauris in sem porttitor maximus.",
    "content": [
      "Quisque porta metus vel maximus tempus.",
      "Suspendisse a diam quis ipsum blandit tempor consequat eu felis.",
      "Mauris condimentum justo nec leo ultricies, ut tincidunt augue venenatis.",
      "Aenean tempor ex vitae venenatis faucibus."
    ]
  },
  {
    "title": "Integer mattis dui posuere, accumsan lacus sit amet, pharetra ante.",
    "content": [
      "Phasellus dignissim nulla at felis aliquam dapibus.",
      "Duis pharetra justo eu neque congue, id rhoncus tellus congue.",
      "Mauris tincidunt nisi in nunc consectetur, eu iaculis diam semper.",
      "Phasellus elementum lorem quis mauris varius consequat."
    ]
  },
  {
    "title": "Pellentesque luctus augue eget diam tincidunt convallis.",
    "content": [
      "Pellentesque id orci vel eros venenatis imperdiet sed eu felis.",
      "Aliquam malesuada magna ac risus accumsan maximus eu pharetra enim.",
      "Sed venenatis leo at nibh bibendum pretium.",
      "Curabitur sed nibh ut sem luctus sodales."
    ]
  },
  {
    "title": "Integer at lacus eleifend, lacinia augue sit amet, eleifend ligula.",
    "content": [
      "Donec finibus ligula eu porta semper.",
      "Aliquam luctus erat a leo tristique, quis consectetur libero ullamcorper."
    ]
  },
  {
    "title": "Ut dapibus elit sed aliquam faucibus.",
    "content": [
      "Praesent bibendum enim sit amet dui tempus tristique.",
      "Nulla facilisis felis efficitur nunc blandit, sit amet gravida nulla scelerisque.",
      "Proin placerat risus facilisis ante condimentum, sit amet ornare lorem accumsan."
    ]
  },
  {
    "title": "Mauris vel tortor eget orci gravida viverra eget hendrerit mauris.",
    "content": [
      "In malesuada nisl quis gravida fermentum.",
      "Duis ullamcorper libero a odio pellentesque dapibus."
    ]
  },
  {
    "title": "Curabitur quis turpis vulputate, varius risus ut, commodo tortor.",
    "content": [
      "Nullam congue arcu nec mauris rhoncus suscipit.",
      "Sed eu arcu vulputate, laoreet felis eu, sodales ante.",
      "Praesent eget justo aliquam, tempor velit nec, viverra elit.",
      "Praesent eu lacus at dolor dictum varius id nec tortor."
    ]
  },
  {
    "title": "Aenean vel quam hendrerit, vestibulum ipsum vitae, laoreet leo.",
    "content": [
      "Vivamus id risus vel metus tincidunt cursus et sit amet nunc.",
      "Mauris dictum lacus in erat tempus consequat.",
      "Fusce id arcu bibendum, mattis nulla vitae, lacinia nisl.",
      "In at sapien quis leo aliquet vestibulum vitae id ligula.",
      "Suspendisse vitae leo finibus, dignissim diam ac, sagittis odio."
    ]
  },
  {
    "title": "Vivamus blandit ante suscipit pellentesque eleifend.",
    "content": [
      "Nulla vulputate felis ut massa posuere auctor.",
      "In auctor justo dapibus lobortis dictum.",
      "Fusce aliquet tortor sit amet leo mollis, sit amet sollicitudin arcu semper.",
      "Phasellus imperdiet enim eget turpis cursus, et blandit dolor sodales."
    ]
  },
  {
    "title": "Donec non neque ac dolor hendrerit ullamcorper non at velit.",
    "content": [
      "Fusce varius nulla sollicitudin, vulputate sem a, dapibus ante.",
      "Curabitur ut quam consectetur, venenatis nisi non, gravida augue.",
      "Maecenas ut elit a lorem consectetur tincidunt."
    ]
  },
  {
    "title": "Donec pellentesque ante vel purus rutrum congue.",
    "content": [
      "Phasellus accumsan diam ac bibendum faucibus.",
      "Nulla egestas purus et tortor ultricies blandit."
    ]
  },
  {
    "title": "In consectetur risus id feugiat pretium.",
    "content": [
      "In vel lorem porttitor, pellentesque erat sit amet, mattis sem.",
      "Donec bibendum eros sit amet mi tempor facilisis.",
      "Donec non augue ut urna sodales blandit eu sit amet erat."
    ]
  },
  {
    "title": "Cras vehicula ipsum at nisl blandit, at vestibulum turpis laoreet.",
    "content": [
      "Aliquam pellentesque sapien ut ligula aliquet vehicula pellentesque ut leo.",
      "Pellentesque aliquam nibh non urna condimentum lacinia.",
      "Etiam in lorem rutrum nunc egestas porttitor nec a nisl."
    ]
  },
  {
    "title": "Donec tempus diam vitae nulla sollicitudin facilisis.",
    "content": [
      "Cras elementum velit a hendrerit gravida.",
      "Nunc gravida augue et purus rhoncus, nec tincidunt odio mollis.",
      "Nunc ut metus luctus, laoreet libero at, porta nisl."
    ]
  },
  {
    "title": "Vivamus at purus et metus vehicula varius.",
    "content": [
      "Donec ultrices ligula vitae elit varius venenatis.",
      "Curabitur hendrerit lectus volutpat ligula rutrum, id congue sapien ultrices."
    ]
  },
  {
    "title": "Sed iaculis tellus sed mollis consectetur.",
    "content": [
      "Vestibulum aliquam quam at ipsum vehicula ultricies.",
      "Vivamus at nibh tempor, varius augue sed, feugiat ante.",
      "Nam eu elit tincidunt, pellentesque mi a, interdum lacus.",
      "Vivamus posuere magna quis venenatis vulputate.",
      "Sed porta neque sit amet odio pulvinar, quis scelerisque magna condimentum."
    ]
  },
  {
    "title": "Sed sagittis nibh posuere diam dictum interdum.",
    "content": [
      "Aenean accumsan felis a congue molestie.",
      "Nunc in mi auctor, condimentum purus nec, porta urna."
    ]
  },
  {
    "title": "Curabitur scelerisque leo a libero iaculis eleifend.",
    "content": [
      "Fusce nec lorem ut nunc mollis commodo elementum in nulla.",
      "Sed quis ligula eu elit faucibus vehicula et vitae nunc.",
      "Morbi non urna in nisl commodo mattis.",
      "Integer sagittis est euismod, dignissim mauris a, feugiat tellus."
    ]
  },
  {
    "title": "Suspendisse vitae diam volutpat nisi vestibulum malesuada.",
    "content": [
      "In ac orci mollis, vestibulum dolor sit amet, porta odio.",
      "Nunc vestibulum velit quis egestas blandit."
    ]
  },
  {
    "title": "Nullam pharetra eros eget interdum scelerisque.",
    "content": [
      "Proin ut justo luctus, efficitur nisl a, pharetra leo.",
      "Nam a est tempus, faucibus elit egestas, eleifend risus."
    ]
  },
  {
    "title": "Praesent sit amet massa non ante porta efficitur a ut elit.",
    "content": [
      "Duis at augue tristique velit ullamcorper cursus.",
      "Praesent eget nisl et lorem sagittis lacinia id ut neque.",
      "Maecenas nec neque faucibus, sollicitudin est ut, sollicitudin felis.",
      "Praesent id dolor non ipsum pulvinar laoreet.",
      "Donec et magna laoreet, interdum orci et, egestas metus."
    ]
  },
  {
    "title": "Duis placerat tellus consequat purus hendrerit, vel dignissim tellus placerat.",
    "content": [
      "Praesent placerat enim in nisi sagittis tempor.",
      "Phasellus commodo velit ut ligula lacinia egestas."
    ]
  },
  {
    "title": "Sed et libero vitae purus venenatis scelerisque nec suscipit ipsum.",
    "content": [
      "Sed condimentum mauris vel justo dictum sagittis.",
      "Nunc id lacus vel metus consectetur eleifend.",
      "In dapibus libero a dui vestibulum interdum.",
      "Etiam fringilla metus in sodales scelerisque."
    ]
  },
  {
    "title": "Proin nec ante bibendum, tempus metus vitae, imperdiet nunc.",
    "content": [
      "Proin dapibus erat vel arcu hendrerit, nec pretium sem tristique.",
      "Fusce lobortis nibh ut nisi eleifend, non blandit leo accumsan.",
      "Etiam aliquam nunc id lorem dapibus mattis."
    ]
  },
  {
    "title": "Aliquam vestibulum mauris vel mi lobortis auctor.",
    "content": [
      "Nunc lacinia mauris a turpis placerat malesuada.",
      "Donec vitae nisl id nisi vulputate elementum quis eget massa.",
      "Vivamus vel dolor vel erat porttitor feugiat."
    ]
  },
  {
    "title": "Vivamus iaculis leo sollicitudin mi malesuada, sit amet finibus tortor luctus.",
    "content": [
      "Quisque ullamcorper velit in condimentum sollicitudin.",
      "Mauris et quam iaculis, varius est eget, blandit nunc.",
      "Pellentesque scelerisque ipsum et laoreet dignissim.",
      "Quisque vehicula odio ac sapien hendrerit, sed pharetra felis tincidunt.",
      "Morbi ultricies velit a varius venenatis."
    ]
  },
  {
    "title": "Vivamus sagittis sapien at nibh egestas, in fringilla tellus fringilla.",
    "content": [
      "Sed rutrum metus a nibh dapibus, et tempus nisi finibus.",
      "Morbi non lorem fermentum, blandit metus sit amet, congue turpis.",
      "Mauris varius nibh vitae lorem volutpat vestibulum."
    ]
  },
  {
    "title": "Curabitur tincidunt quam et urna feugiat ultrices.",
    "content": [
      "Cras vitae tellus in dui faucibus ullamcorper.",
      "Pellentesque in odio commodo, tristique sapien et, gravida erat."
    ]
  },
  {
    "title": "Nulla nec nunc tristique metus iaculis fringilla.",
    "content": [
      "Etiam dignissim ipsum ac tempor dignissim.",
      "Aliquam in dui vehicula, aliquam neque vitae, blandit tellus."
    ]
  },
  {
    "title": "Maecenas porta eros at sodales malesuada.",
    "content": [
      "Pellentesque faucibus leo eget imperdiet condimentum.",
      "Aliquam id orci ut mauris accumsan ornare.",
      "Duis ut elit eu ex dictum volutpat vel sed lectus.",
      "Phasellus eget nunc vehicula, feugiat augue et, sollicitudin orci."
    ]
  },
  {
    "title": "Ut at augue et lectus mattis tempor ac at tortor.",
    "content": [
      "Proin nec orci sit amet sapien sodales accumsan ut ut nisl.",
      "Etiam fringilla orci eu lectus bibendum tempus.",
      "Mauris at tellus vel lorem scelerisque pulvinar pulvinar id nibh.",
      "Sed eget tortor vulputate, feugiat sem at, consectetur ipsum."
    ]
  },
  {
    "title": "Nam sed justo et nisi facilisis ultricies.",
    "content": [
      "In tempus nisi id diam ultrices tincidunt.",
      "Praesent at metus sagittis, finibus risus in, hendrerit tellus."
    ]
  },
  {
    "title": "Donec non magna nec orci lobortis iaculis a vel sem.",
    "content": [
      "Cras nec felis non dui mattis ornare consectetur a magna.",
      "Sed vel nibh in odio volutpat sollicitudin eget ac tellus.",
      "Fusce eu orci eu magna sagittis molestie in at purus.",
      "Vivamus porta lorem vel velit consequat, at tincidunt arcu luctus."
    ]
  },
  {
    "title": "Quisque placerat nulla non nibh laoreet volutpat.",
    "content": [
      "Quisque tempus ligula quis condimentum blandit.",
      "Nam vitae ipsum id elit elementum suscipit et et purus.",
      "Vestibulum molestie justo et justo ullamcorper fringilla."
    ]
  },
  {
    "title": "Donec id augue eget erat pulvinar porttitor sit amet ut lectus.",
    "content": [
      "Cras dignissim nisi non porttitor molestie.",
      "Cras lacinia eros in nisl condimentum, vitae imperdiet purus hendrerit.",
      "Sed feugiat odio et nibh aliquet pretium."
    ]
  },
  {
    "title": "Phasellus luctus dolor vel tellus tristique tempus.",
    "content": [
      "Sed quis quam tincidunt, porttitor nulla et, venenatis sapien.",
      "Cras in lacus eget leo venenatis scelerisque eu vel nisi.",
      "Nullam vulputate mauris sit amet mauris vestibulum bibendum.",
      "Donec efficitur massa sed nulla elementum scelerisque.",
      "Duis eu neque in est egestas eleifend."
    ]
  },
  {
    "title": "Fusce dictum justo et leo fermentum rhoncus.",
    "content": [
      "Maecenas sed magna non dui congue semper.",
      "Donec ornare odio dictum metus condimentum placerat.",
      "Duis sed turpis in orci scelerisque sagittis ut vehicula dui.",
      "Proin sed sapien non leo tempor ultrices at sed nisl."
    ]
  },
  {
    "title": "Praesent molestie urna non orci tincidunt, in finibus ipsum vestibulum.",
    "content": [
      "Fusce eu metus porta, feugiat sapien et, auctor purus.",
      "Sed nec mi faucibus, lobortis enim ac, laoreet ipsum.",
      "Curabitur ut augue consequat, aliquet turpis vel, sagittis neque."
    ]
  },
  {
    "title": "Nullam scelerisque nibh sit amet velit porta varius.",
    "content": [
      "Nam sit amet odio et nunc pharetra pellentesque ut non elit.",
      "Aenean porta nulla a porta eleifend."
    ]
  },
  {
    "title": "Sed in lacus rutrum, efficitur erat eget, porttitor ante.",
    "content": [
      "Sed ac est nec magna tristique vestibulum.",
      "Donec posuere lectus porttitor nulla volutpat vulputate.",
      "Nulla elementum metus eget maximus elementum."
    ]
  },
  {
    "title": "Quisque gravida orci eu ante molestie laoreet.",
    "content": [
      "Donec a tellus nec dui convallis maximus eu ut nisl.",
      "Praesent hendrerit dui eget tristique vehicula.",
      "Integer in lectus eleifend, aliquet enim ut, malesuada orci.",
      "Praesent quis libero lacinia, fermentum odio id, rhoncus mauris.",
      "Quisque blandit lorem vitae interdum consequat."
    ]
  },
  {
    "title": "Cras tincidunt lorem sed mi aliquet lacinia.",
    "content": [
      "Ut ultricies nisl ut tincidunt ultrices.",
      "Ut feugiat ipsum non eleifend egestas.",
      "Nunc ullamcorper ante interdum urna sodales, sed tempus nisi ornare.",
      "Quisque imperdiet urna eu laoreet blandit.",
      "Proin tristique justo sit amet semper feugiat."
    ]
  },
  {
    "title": "Suspendisse vestibulum mauris id libero mollis facilisis.",
    "content": [
      "In in nisi ac tellus volutpat auctor.",
      "Praesent tempus tellus at ligula convallis commodo.",
      "Donec egestas odio vitae turpis interdum scelerisque.",
      "Nunc porttitor mi ut nibh feugiat egestas.",
      "Fusce at dui dignissim, volutpat lorem id, consectetur eros."
    ]
  },
  {
    "title": "Aenean et enim fermentum, faucibus sapien id, pellentesque augue.",
    "content": [
      "Praesent vel urna ullamcorper, dapibus leo quis, porta nisi.",
      "Integer et tortor a diam dictum tempus."
    ]
  },
  {
    "title": "Nullam sit amet orci in urna molestie lobortis.",
    "content": [
      "Suspendisse vel odio eget justo tempor fringilla.",
      "Cras venenatis purus et nulla condimentum, vel pretium neque malesuada.",
      "Praesent convallis nunc ut magna blandit pellentesque.",
      "Duis vitae justo ut lectus lacinia dignissim."
    ]
  },
  {
    "title": "Sed pulvinar est consequat, porta odio a, lacinia orci.",
    "content": [
      "Etiam viverra enim ut risus rutrum, vitae feugiat enim tempor.",
      "Sed nec elit et mauris vulputate lacinia.",
      "Etiam in mi congue, tristique leo sed, gravida felis.",
      "Sed bibendum nibh sed dolor porttitor, at viverra arcu tempor.",
      "Praesent finibus tortor ac felis aliquet lobortis."
    ]
  },
  {
    "title": "Aliquam quis tellus sed risus luctus scelerisque eu sed nisi.",
    "content": [
      "Nam non felis in arcu dapibus iaculis.",
      "Morbi elementum arcu vel magna congue, at maximus diam placerat.",
      "Aliquam sit amet nunc ut lorem pellentesque interdum."
    ]
  },
  {
    "title": "Duis vestibulum velit in vehicula viverra.",
    "content": [
      "Fusce sit amet leo lacinia, auctor lectus at, sollicitudin libero.",
      "Sed ut tellus sit amet felis dignissim consectetur.",
      "Donec sed ex sit amet urna placerat tempor non a nisi."
    ]
  },
  {
    "title": "Maecenas consectetur eros ut massa blandit, sit amet bibendum mauris scelerisque.",
    "content": [
      "Quisque rutrum velit vel augue euismod pharetra eu ut enim.",
      "Etiam porttitor dolor tristique risus accumsan pharetra."
    ]
  },
  {
    "title": "In pharetra enim a sem scelerisque laoreet a non mauris.",
    "content": [
      "Proin sed sapien et felis dapibus dapibus nec a ligula.",
      "Sed eu leo ac leo tristique hendrerit."
    ]
  },
  {
    "title": "Donec sed ante viverra, viverra dolor sed, laoreet libero.",
    "content": [
      "Nulla viverra sapien vel vehicula fermentum.",
      "Proin sed nisl in augue malesuada porttitor.",
      "Aenean ut turpis ornare, vestibulum massa ultricies, mattis odio."
    ]
  },
  {
    "title": "Suspendisse non ante nec lorem tempus interdum.",
    "content": [
      "Vestibulum placerat quam non finibus dapibus.",
      "Sed vulputate elit eu eleifend pellentesque.",
      "Donec nec lorem elementum, ullamcorper quam accumsan, pulvinar libero.",
      "Integer sed mauris molestie, sodales augue vitae, gravida sem."
    ]
  },
  {
    "title": "Integer mattis lorem lacinia mauris efficitur, sed molestie leo elementum.",
    "content": [
      "Vivamus quis risus vitae ex eleifend porta id et ex.",
      "Nullam gravida arcu eget est sodales euismod sit amet quis eros.",
      "Quisque ac est eu ex gravida lacinia.",
      "Vivamus suscipit est vitae justo pretium, quis malesuada ligula molestie."
    ]
  },
  {
    "title": "Vivamus sit amet quam et eros dignissim consequat.",
    "content": [
      "Donec eu arcu et tortor tempor congue.",
      "Vestibulum ut ipsum vitae quam convallis auctor quis quis nunc.",
      "Quisque ullamcorper velit in augue porta elementum sed ut sapien."
    ]
  },
  {
    "title": "Nam non neque a ante elementum suscipit ac ultricies arcu.",
    "content": [
      "Aliquam egestas ex ut convallis commodo.",
      "Fusce eu nunc sollicitudin massa tincidunt eleifend."
    ]
  }
];

let app;



function init (data) {
  app = new Vue({
    el: '#app',
    data,
    methods: {
      getContentKey (cardIndex, contentIndex) {
        return `${cardIndex} ${contentIndex}`;
      },
      generateCardId (cardIndex, useHash = false) {
        return `${useHash ? '#' : ''}card-${cardIndex}`;
      },
      setTabIndexForCard (cardIndex, newTabIndex) {
        this.cardTabStates = [
          ...this.cardTabStates.slice(0, cardIndex),
          newTabIndex,
          ...this.cardTabStates.slice(cardIndex + 1),
        ];
      },
    },
  });
}

init({
  cards: LOREM_IPSUM_DATA,
  paragraph: BASE_CARD_CONTENT,
  cardTabStates: LOREM_IPSUM_DATA.map(() => 0),
});
              
            
!
999px

Console