Nuxt•4mo ago

change background colour on a ULandingCard

How can I change the white bacground on a ULandingCard - tried this

<UContainer class="text-blue-400 small-card bottom-card bg-red">
        <ULandingCard
          title="For Customers"
          description="Make appointments ..."
          color="primary"
          to="/for-customers"
          style={{ backgroundColor: 'red' }}
      />
</UContainer>

<UContainer class="text-blue-400 small-card bottom-card bg-red">
        <ULandingCard
          title="For Customers"
          description="Make appointments ..."
          color="primary"
          to="/for-customers"
          style={{ backgroundColor: 'red' }}
      />
</UContainer>

2 Replies

emsitkowski•4mo ago

Hi @Dave Herring, you have to move bg-red class to ULandingCard component. Or you can globally change card background in app.config.ts like that: export default defineAppConfig({ ui: { landing: { card: { wrapper: 'bg-red' } } } })

Dave HerringOP•3mo ago

<UContainer class="text-blue-400 small-card top-card left-[50%] md:left-[35%] "> <ULandingCard class="bg-red-500" title="ffFor Business Owners" description="Grow your business with online bookings and add customer relationship management using gobookit." color="green" to="/business" :links="[{ label: 'Learn more', variant: 'link', color: 'gray', size: 'md', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]" > <template #description> <p>Grow your business with online bookings and customer relationship management</p> <p class="learn-more"> Learn more <i class="i-heroicons-arrow-right-20-solid" /> </p> </template> </ULandingCard> </UContainer> I can get a red blur on background when mose over, but not actually change the background from white.

Gaming

Programming

change background colour on a ULandingCard