<commit_before><template>
  <v-container>
    <v-layout column>
      <h3 class="title grey--text mb-4 mt-5 center">
        Basic
      </h3>
      <v-flex>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            large
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </v-flex>

      <h3 class="title grey--text mb-4 mt-5 center">
        Opposite slot
      </h3>
      <v-flex>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            :large="n % 2"
          >
            <span slot="opposite">
              Tus eu perfecto
            </span>
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </v-flex>

      <h3 class="title grey--text mb-4 mt-5 center">
        Different colors
      </h3>
      <v-flex>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            :color="n % 2 ? 'red lighten-2' : 'success'"
            large
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </v-flex>

      <h3 class="title grey--text mb-4 mt-5 center">
        Large dots
      </h3>
      <v-flex>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            large
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </v-flex>

      <h3 class="title grey--text mb-4 mt-5 center">
        Icons in dots
      </h3>
      <v-flex>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            :icon="n % 2 ? 'mdi-magnify' : 'mdi-book'"
            :large="n % 2"
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </v-flex>

      <h3 class="title grey--text mb-4 mt-5 center">
        Dense
      </h3>
      <v-flex>
        <v-timeline dense>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </v-flex>

      <h3 class="title grey--text mb-4 mt-5 center">
        Dense with large dots
      </h3>
      <v-flex>
        <v-timeline dense>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            large
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </v-flex>

      <h3 class="title grey--text mb-4 mt-5 center">
        Dense with icons
      </h3>
      <v-flex>
        <v-timeline dense>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            icon="mdi-magnify"
            :large="n % 2"
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  export default {<commit_msg>docs(kitchen): use CoreSection and CoreTitle in Timelines pan (#6236)<commit_after><template>
  <v-container>
    <v-layout column>
      <core-title>
        Basic
      </core-title>
      <core-section>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            large
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </core-section>

      <core-title>
        Opposite slot
      </core-title>
      <core-section>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            :large="n % 2"
          >
            <span slot="opposite">
              Tus eu perfecto
            </span>
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </core-section>

      <core-title>
        Different colors
      </core-title>
      <core-section>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            :color="n % 2 ? 'red lighten-2' : 'success'"
            large
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </core-section>

      <core-title>
        Large dots
      </core-title>
      <core-section>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            large
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </core-section>

      <core-title>
        Icons in dots
      </core-title>
      <core-section>
        <v-timeline>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            :icon="n % 2 ? 'mdi-magnify' : 'mdi-book'"
            :large="n % 2"
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </core-section>

      <core-title>
        Dense
      </core-title>
      <core-section>
        <v-timeline dense>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </core-section>

      <core-title>
        Dense with large dots
      </core-title>
      <core-section>
        <v-timeline dense>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            large
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </core-section>

      <core-title>
        Dense with icons
      </core-title>
      <core-section>
        <v-timeline dense>
          <v-timeline-item
            v-for="n in 2"
            :key="n"
            color="red lighten-2"
            icon="mdi-magnify"
            :large="n % 2"
          >
            <v-card class="elevation-2">
              <v-card-title class="headline">
                Lorem ipsum
              </v-card-title>
              <v-card-text>
                Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at.
                Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
              </v-card-text>
            </v-card>
          </v-timeline-item>
        </v-timeline>
      </core-section>
    </v-layout>
  </v-container>
</template>

<script>
  export default {
{'fraction_non_alphanumeric': 0.10979929161747344, 'fraction_numerical': 0.006936245572609209, 'mean_word_length': 1.305324034699779, 'pattern_counts': {'":': 0, '<': 245, '<?xml version=': 0, '>': 245, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 16, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '510734', 'n_tokens_mistral': 4464, 'n_tokens_neox': 4245, 'n_words': 1070}