Menu icon Foundation
F6.3 Cards Styling Missing?

I copied the example code verbatim from the documentation. There does not appear to be any card-related css being applied. For example there are no background colors, padding or dividing lines. However, the responsive menu and grid appear to be working correctly so it seems the page is loading the intended Foundation css and js. 

Here's the page rendering the Card code:

Example Card page with no styling

Is there something missing in the build for 6.3 for Cards or is there something wrong with the example code copied below from the 6.3 documentation:

<div class="card" style="width: 300px;">

  <div class="card-divider">

    This is a header

  </div>

  <img src="assets/img/generic/rectangle-1.jpg">

  <div class="card-section">

    <h4>This is a card.</h4>

    <p>It has an easy to override visual style, and is appropriately subdued.</p>

  </div>

</div>

f6.3card

I copied the example code verbatim from the documentation. There does not appear to be any card-related css being applied. For example there are no background colors, padding or dividing lines. However, the responsive menu and grid appear to be working correctly so it seems the page is loading the intended Foundation css and js. 

Here's the page rendering the Card code:

Example Card page with no styling

Is there something missing in the build for 6.3 for Cards or is there something wrong with the example code copied below from the 6.3 documentation:

<div class="card" style="width: 300px;">

  <div class="card-divider">

    This is a header

  </div>

  <img src="assets/img/generic/rectangle-1.jpg">

  <div class="card-section">

    <h4>This is a card.</h4>

    <p>It has an easy to override visual style, and is appropriately subdued.</p>

  </div>

</div>

This post has been closed. No new replies can be added.

Alejandro almost 3 years ago

the same happens to me, don´t know why :(

 

Guy Van Bael almost 3 years ago

add this to your app.scss to the list of includes (i presume you're using the sass version).

@include foundation-card;

 

Alejandro almost 3 years ago

Thank so much, worked like a charm :)

Why did it happen, i´ve just downloaded F 6.3, shouldn´t be there in app.scss file already ?

regards

Guy Van Bael almost 3 years ago

Don't know why it's not in the app.scss. Problably slipped out when implementing the component...