
        <script setup>
        import { Playground } from "@viteplay/vue"
                
        
            let modules_0 = {}
            import  module_0_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CCard/CCard.vue"
              modules_0["../CCard.vue"] = module_0_0
              
            

            let modules_1 = {}
            import  module_1_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CCardHeader/CCardHeader.vue"
              modules_1["../CCardHeader.vue"] = module_1_0
              
            

            let modules_2 = {}
            import  module_2_0 from "/Users/nakashimakeiju/ghq/github.com/CodeLic/console/src/components/CCardHeader/CCardHeader.vue"
              modules_2["../CCardHeader.vue"] = module_2_0
              
            
        </script>
        <template>
          <div>
            <h1>CCard</h1>
            
            <section>
            <h2 id="basic">Basic</h2>
            <Playground :modules="modules_0" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20CCard%20from%20'../CCard.vue'%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCCard%20class=%22testClass%22%3E%20test%20%3C/CCard%3E%0A%3C/template%3E%0A%3Cstyle%3E%0A.testClass%20%7B%0A%20%20height:%20150px;%0A%7D%0A%3C/style%3E%0A`)" />
            </section>
              

            <section>
            <h2 id="basic">Basic</h2>
            <Playground :modules="modules_1" :code="decodeURI(`%3Cscript%20setup%3E%0A%20%20import%20CCardHeader%20from%20'../CCardHeader.vue'%0A%20%20%3C/script%3E%0A%0A%20%20%3Ctemplate%3E%0A%20%20%20%20%3CCCardHeader%0A%20%20%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%8C%E5%85%A5%E3%82%8A%E3%81%BE%E3%81%99%22%0A%20%20%20%20%20%20p_TitleAline=%22center%22%0A%20%20%20%20%20%20p_Type=%22primary%22%0A%20%20%20%20%20%20:p_ButtonHidden=%22false%22%0A%20%20%20%20%20%20:p_ArrowOpen=%22true%22%0A%20%20%20%20%20%20class=%22_c_card_basic%22%0A%20%20%20%20/%3E%0A%20%20%3C/template%3E%0A%20%20%3Cstyle%3E%0A%20%20:root%20%7B%0A%20%20%20%20--q-primary:%20#5e421d;%0A%20%20%20%20--q-accent:%20#ffffff;%0A%20%20%7D%0A%20%20._c_card_basic%20%7B%0A%20%20%20%20height:%2080px;%0A%20%20%20%20font-size:%2040px;%0A%20%20%7D%0A%20%20%3C/style%3E%0A%20%20`)" />
            </section>
              

            <section>
            <h2 id="secondary">secondary</h2>
            <Playground :modules="modules_2" :code="decodeURI(`%3Cscript%20setup%3E%0Aimport%20CCardHeader%20from%20'../CCardHeader.vue'%0A%3C/script%3E%0A%0A%3Ctemplate%3E%0A%20%20%3CCCardHeader%0A%20%20%20%20p_Title=%22%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%8C%E5%85%A5%E3%82%8A%E3%81%BE%E3%81%99%22%0A%20%20%20%20p_TitleAline=%22center%22%0A%20%20%20%20p_Type=%22secondary%22%0A%20%20%20%20:p_ButtonHidden=%22false%22%0A%20%20%20%20:p_ArrowOpen=%22true%22%0A%20%20%20%20class=%22_c_card_basic_second%22%0A%20%20/%3E%0A%3C/template%3E%0A%3Cstyle%3E%0A:root%20%7B%0A%20%20--q-secondary:%20#0000a0;%0A%20%20--q-accent:%20#ffffff;%0A%7D%0A._c_card_basic_second%20%7B%0A%20%20height:%2030px;%0A%20%20font-size:%2024px;%0A%7D%0A%3C/style%3E%0A`)" />
            </section>
              
          </div>
        </template>
      