Prime Community Forum

We purchased PrimeVue Blocks and were surprised to see that components are not used in some instances. I'm assuming what we are seeing is the html output of a component. A good example is the sign in block.

<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
<div class="text-center mb-5">
<img src="images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
</div>

Is there a reason component code is not provided for what I would expect is a <Card> component? Further down in the file <InputText> and <Checkbox> components are used.....but why not for the <Card>? Just trying to understand if this is how blocks should be used and I guess a little confused on why this approach was chosen.

Card is a kind of composite component than the InputText and Checkbox. Styles of InputText and Checkbox can be override easily but Card uses templating slots. Instead of using Card component, to keep it simple we prefer just use PrimeFlex classes.

In some cases, we prefer to use PrimeVue components based on how close the block design is to the design of PrimeVue components. And try to keep that to a minimum.