How do I get this template (Tabs v2)?

I was looking for Tabs v2 navigation position on left. I found this answer, but I cannot find this section anywhere:

Please help

Hi @kroolik123,

The Design Cloud is currently available on Pro, not yet for X theme. And that one is just contributed by users :slight_smile:

But you can do the same CSS to Tab element’s CSS

/*
// Adjust Breakpoint to Suit
// -------------------------
*/

@media (min-width: 1000px) {
  
  /*
  // Layout Styles
  // -------------
  // Do not change these styles unless you
  // know what you are doing.
  //
  // 01. Change `row` to `row-reverse` if
  //     you wish to flip the layout. Your
  //     theming styles below will need
  //     be updated as well.
  // 02. Ensures that the tablist will
  //     be the width of the longest tab.
  // 03. Keeps tabs from scrolling when
  //     in this layout configuration.
  // 04. Ensures that the panels container
  //     fills all available space.
  // 05. Allows panels to stretch vertically
  //     if the height of all tabs combined
  //     is taller than the current panel.
  */

  $el {
    display: flex;
    flex-flow: row nowrap; /* 01 */
    align-items: stretch;
  }

  $el .x-tabs-list {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex: 0 0 auto; /* 02 */
    overflow: visible; /* 03 */
   }

  $el .x-tabs-panels {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    flex: 1 1 0%; /* 04 */
    height: auto !important; /* 05 */
  }


  /*
  // Theming Styles
  // --------------
  // All changes made here are based on
  // the original styles used. You will
  // need to update these depending on
  // how you style your "Tabs" Element.
  */

  $el .x-tabs-list {
    margin: 0 -1px 0 0;
  }

  $el .x-tabs-list button {
    padding-left: 0;
    border-width: 0 1px 0 0;
    text-align: right;
  }
  
  $el .x-tabs-list button:hover,
  $el .x-tabs-list button[class*="active"] {
    border-color: #000000;
  }
}

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.