designComponent.html

designComponent.html

<template>
    <lightning-card title="Design with CSS" icon-name="standard:lightning_component">
        <!--This class (slds-p-around_x-large) is used for padding-->
        <div class="slds-p-around_x-large">
            <!--Custom CSS clsss (para-header-style) used to style the paragraph tag-->
            <p class="para-header-style"> Welcome to Lightning Web Component Tutorial</p>
            <!--Custom CSS clsss (para-style) used to style the paragraph tag-->
            <p class="para-style">Learn LWC framework from scratch with real use cases.</p>
            <!--Style button components using lightning design system styling hooks-->
            <lightning-button variant="brand" label="Click Me !" ></lightning-button>
        </div>
    </lightning-card>
</template>