Making card on top of the item

@anuj9196 wrote:

I am designing a layout like

I have the HTML defined as

<ion-content>

    <ion-item color="primary">

        <ion-grid fixed padding padding-top padding-bottom class="auth-header">
            <ion-row>
                <ion-col text-center>
                    <ion-item lines="none" color="transparent">
                        <ion-img src="./assets/images/logo/no11_100.png" class="auth-logo"></ion-img>
                    </ion-item>
                </ion-col>
            </ion-row>

            <ion-row>
                <ion-col text-center>
                    <ion-item lines="none" color="transparent">
                        <ion-label text-center class="label-solid">Login</ion-label>
                    </ion-item>
                </ion-col>
            </ion-row>
        </ion-grid>

    </ion-item>

    <ion-item lines="none">

        <ion-grid>
            <ion-row>
                <ion-col>

                    <ion-card class="auth-card">
                        <ion-card-content>

                            <-- form content here -->

                        </ion-card-content>
                    </ion-card>

                </ion-col>
            </ion-row>
        </ion-grid>

    </ion-item>
</ion-content>

Which looks like

Screenshot 2019-03-02 at 12.40.44 AM.png450×525 13.4 KB

Here the top of the card is hidden behind the blue background.

I have added following CSS

:root {
  .auth-card {
    margin-top: -50px;
  }
}

How could I bring it to top?

Posts: 1

Participants: 1

Read full topic