Card

<div class="card ">
    Dolor quibusdam provident dolorem fuga explicabo illo? Dolorum reprehenderit quaerat saepe cupiditate commodi. Suscipit nobis ipsum sunt dolorum quasi. Culpa impedit dolore doloremque mollitia dolores, veniam Atque autem unde eveniet.
</div>
<div class="card {{modifier}}">
  {{#> @partial-block}}
    {{content}}
  {{/ @partial-block}}
</div>
{
  "content": "Dolor quibusdam provident dolorem fuga explicabo illo? Dolorum reprehenderit quaerat saepe cupiditate commodi. Suscipit nobis ipsum sunt dolorum quasi. Culpa impedit dolore doloremque mollitia dolores, veniam Atque autem unde eveniet."
}
  • Content:
    /**
     * Card
     *
     * A generic card with pretty little drop shadows
     */
    
    @media screen {
    
      .card {
        background-color: var(--card-background);
        padding: 1rem;
        box-shadow: var(--card-shadow);
      }
    }
    
  • URL: /components/raw/card/card.css
  • Filesystem Path: components/02_molecules/card/card.css
  • Size: 204 Bytes

Card

A generic component with a base look of white with a slight drop shadow. For use anywhere where a card look is desired. Does not apply any margins of its own. Recommended as a child of a grid component, like @dash-grid.