CODEWITHSUNDEEP
cssmaterial-designmaterial-components
pulkit aggarwal
pulkit aggarwal

Reputation: 107

why the Material components card title aligned to bottom?

i am making a card with material components for web and i want to have my template layout to have all its data inside it.

Now when i am using mdc-card__title or subtitle , both of them are getting aligned to the bottom of the card which i don not want.

Is there anything wrong i am doing ?

See the code for help :

.demo-card{
	width:65%; max-height: 500px;
	position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
}
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="main.css">
	<link rel="stylesheet"
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
	<div class="mdc-card demo-card">
         <section class="mdc-card__primary">
            <h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
            <h2 class="mdc-card__subtitle">Subtitle here</h2>
          </section>
          <section class="mdc-card__supporting-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.
          </section>
	</div>
</body>
	
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
</html>

Why is it leaving a space for media even when i am not adding any media content.

Upvotes: 2

Views: 736

Answers (1)

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

This seems to be by design, according to the docs:

Content will be bottom-aligned if it's smaller than the height of the card.

It should be possible to override .mdc-card's justify-content style to flex-start if you want to change this to top-aligned instead.

Upvotes: 2

Related Questions