Function Horizontal

app/components/common/elements/ContentBox.stories.js:104–134

(args)

}

export const Horizontal = (args) => ({
  components: { ContentBox, MixedColorLabel, LearnMoreButton },
  props: Object.keys(args),
  template: `
    <content-box :main-image-original="mainImageOriginal" :arrangement="arrangement" :has-padding="hasPadding" :main-image-bg="mainImageBg" :equal-width="equalWidth">
      <template v-slot:image v-if="image">
          <img :src="imageUrl" />
      </template>
      <template v-slot:symbolImage v-if="symbolImage">
          <img src="/images/pages/codequest/cc2-s.webp" />
      </template>
      <template v-slot:title v-if="title">
            <mixed-color-label
                  text="Learn to __code__ and use __AI__, all through the __power of play__"
              />
      </template>
      <template v-slot:text v-if="text">
        Globally acclaimed for its cutting-edge research and innovation, UC Berkeley provides comprehensive and
            rigorous computer science programs. These programs enhance creative problem-solving skills and encourage
            a deeper understanding of computational theory, equipping individuals to be transformative leaders in
            the rapidly evolving tech industry.
      </template>
      <template v-slot:button v-if="button">
          <learn-more-button link="https://ozaria.com" target="_blank">Learn More</learn-more-button>
      </template>
      <template v-slot:frameImage v-if="frameImage">
          <img src="/images/pages/codequest/cc4-google.webp" />
      </template>
    </content-box>
  `
})

Horizontal.args = {
  arrangement: 'horizontal',