//Code Structure from user end useages
<Card type="primary/secondary" >
<CardHeader skeleton={}>desk-top-bar</CardHeader>
<CardContent>
<Card type="primary/secondary" align=col>
<CardHeader skeleton={} renderProps={}></CardHeader>
<CardContent></CardContent>
<CardFooter></CardFooter>
</Card>
</CardContent>
<CardFooter>wms</CardFooter>
</Card>

<!-- are we support skeleton for every child(CardHeader/CardContent  if  have some func...) -->

<Card header={()=>{}} footer={()=>{}} content={()=>{}} > // karthi prabhu
<Card type="primary/secondary" align=col>
<CardHeader skeleton={} renderProps={}></CardHeader>
<CardContent></CardContent>
<CardFooter></CardFooter>
<Button></Button>
</Card> //sudalai

<Card type="primary/secondary" align=col>
    <Card.Header skeleton={} renderProps={}></CardHeader>
    <Card.Content></CardContent>
    <Card.Footer></CardFooter>
    <Button></Button>
</Card>

// advantages

//Ref
HelpCenter card component proptypes = https://zgit.csez.zohocorpin.com/zohodesk/hc-components/-/blob/master/src/components/NewCard/Card.propTypes.js
Desk card component cases = https://zgit.csez.zohocorpin.com/zohodesk/desk-library/-/blob/master/jsapps/components/src/Card/Card.js

<ui>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ui>

<PaginationAnchor options={[{"name":"1","id":1,href:''}]} ></PaginationAnchor>
<PaginationButton options={[{"name":"1","id":1,href:''}]}></PaginationButton>

/\* _/
<Pagination options={[{"name":"1","id":1,href:'',},{"name":"2","id":1,buttonOptions:{}},{"name":"3","id":1},{"name":"4","id":1,"disabled":true},{"name":"5","id":1,"isSelected":true}]} />
/_ _/
<Pagination>
<PaginationItem  name='' id=''/>
<decoration />
</Pagination>
/_ _/
<RadioGroup options={[{"text":"1","value":1},{"text":"1","value":1}] />
/_ \*/
<RadioGroup defaultValue="primary1" renderComponent={return} >
<Radio renderComponent={return} function text="Primary1" value="primary1" onChange />
<Radio text="Primary2" value="primary2" onChange disabled />

    <div>
    <Radio text="Primary3" value="primary3" />
    </div>
    <div>
    <Radio text="Primary4" value="primary4" />
    </div>

</RadioGroupContext>

<DropDown>,

<!-- First review -->

<Card>
    <CardHeader></CardHeader>
    <CardContent></CardContent>
    <CardFooter></CardFooter>
</Card>
Done this format in first level review , here done  TL UI,  HC UI for examples

<!--  -->

After first level review, plan to develop below format

<Card>
    <Card.Avatar ></Card.Avatar>
     <Card.PrimaryText></Card.PrimaryText>
     <Card.SecondaryText></Card.SecondaryText>
     <Card.HeaderAction></Card.HeaderAction>
     <Card.FooterAction></Card.FooterAction>
</Card>
analysed desk and hc  card UI's and given some common card-ui second level  review
<!--  -->

in second-level review some custom-skeleton cases discuussed, then plan to try below format

<!--  -->

<Card header={()=>{}} footer={()=>{}} content={()=>{}} avatar={<Avatar/>}> //yet not final

<Card>
    <Card.Header>
        <Avatar></Avatar>
    </Card.Header>
     <Card.TextFields>
     </Card.TextFields>
     <Card.HeaderAction></Card.HeaderAction>
     <Card.FooterAction></Card.FooterAction>
</Card>
