card
Use article.card with optional semantic header, content, footer, and action
regions. Direct headers, headings, and header paragraphs need no part classes.
<article class="card">
<header>
<h2>Title</h2>
<p>Optional description</p>
<menu>Action</menu>
</header>
<section>Content</section>
<footer>Footer</footer>
</article>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Card</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="card-demo">
<article class="visual-example card">
<header>
<h2>Login to your account</h2>
<p>Enter your email below to login to your account</p>
<menu>
<button variant="link" type="button">Sign Up</button>
</menu>
</header>
<section>
<form class="card-form" id="login-form">
<div class="card-field">
<label for="card-email">Email</label>
<input
id="card-email"
type="email"
placeholder="m@example.com"
required
/>
</div>
<div class="card-field">
<div class="card-label-row">
<label for="card-password">Password</label>
<a href="#forgot-password">Forgot your password?</a>
</div>
<input id="card-password" type="password" required />
</div>
</form>
</section>
<footer class="card-footer-stacked">
<button type="submit" form="login-form">Login</button>
<button variant="outline" type="button">Login with Google</button>
</footer>
</article>
</body>
</html>
Image And RTL
Card content remains ordinary semantic HTML. Use local images, logical CSS properties, and AngularTS form or command directives for application state.
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Card Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="cardAction='No event selected'; rtl={email:'',password:'',status:'جاهز'}; smallCardAction='No report action'"
data-example="card-image card-rtl card-small"
>
<main class="card-workflows" aria-label="Card reference workflows">
<section class="card-workflow" aria-labelledby="card-image-heading">
<h2 id="card-image-heading">Image card</h2>
<article class="card-image-card card">
<div class="card-image-overlay" aria-hidden="true"></div>
<img
class="card-cover-image"
src="../../images/avatars/01.png"
alt="Abstract event cover"
/>
<header>
<menu>
<span variant="secondary" class="badge">Featured</span>
</menu>
<h2>Design systems meetup</h2>
<p>
A practical talk on component APIs, accessibility, and shipping
faster.
</p>
</header>
<footer>
<button
type="button"
class="card-full-button"
ng-click="cardAction='Viewing Design systems meetup'"
>
View Event
</button>
</footer>
</article>
<output class="card-workflow-output">{{ cardAction }}</output>
</section>
<section
class="card-workflow"
aria-labelledby="card-rtl-heading"
dir="rtl"
lang="ar"
>
<h2 id="card-rtl-heading">بطاقة من اليمين إلى اليسار</h2>
<article class="card-rtl-card card" dir="rtl">
<header>
<h2>تسجيل الدخول إلى حسابك</h2>
<p>أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك</p>
<menu>
<button
variant="link"
type="button"
ng-click="rtl.status='إنشاء حساب جديد'"
>
إنشاء حساب
</button>
</menu>
</header>
<section>
<form
class="card-form"
id="rtl-login-form"
ng-submit="rtl.status='تم تسجيل الدخول باسم ' + rtl.email"
>
<div class="card-field">
<label for="card-email-rtl">البريد الإلكتروني</label>
<input
id="card-email-rtl"
type="email"
placeholder="m@example.com"
ng-model="rtl.email"
required
/>
</div>
<div class="card-field">
<div class="card-label-row">
<label for="card-password-rtl">كلمة المرور</label>
<a href="#forgot-password-rtl">نسيت كلمة المرور؟</a>
</div>
<input
id="card-password-rtl"
type="password"
ng-model="rtl.password"
required
/>
</div>
</form>
</section>
<footer class="card-footer-stacked">
<button type="submit" form="rtl-login-form">تسجيل الدخول</button>
<button
variant="outline"
type="button"
ng-click="rtl.status='متابعة باستخدام Google'"
>
تسجيل الدخول باستخدام Google
</button>
</footer>
</article>
<output class="card-workflow-output"> الحالة: {{ rtl.status }} </output>
</section>
<section class="card-workflow" aria-labelledby="card-small-heading">
<h2 id="card-small-heading">Small card</h2>
<article size="sm" class="card-small-card card">
<header>
<h2>Scheduled reports</h2>
<p>Weekly snapshots. No more manual exports.</p>
</header>
<section>
<ul class="card-feature-list">
<li>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" /></svg
><span>Choose a schedule (daily, or weekly).</span>
</li>
<li>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" /></svg
><span>Send to channels or specific teammates.</span>
</li>
<li>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" /></svg
><span>Include charts, tables, and key metrics.</span>
</li>
</ul>
</section>
<footer class="card-footer-stacked">
<button
size="sm"
type="button"
ng-click="smallCardAction='Scheduled reports setup'"
>
Set up scheduled reports
</button>
<button
variant="outline"
size="sm"
type="button"
ng-click="smallCardAction='Showing report updates'"
>
See what's new
</button>
</footer>
</article>
<output class="card-workflow-output">{{ smallCardAction }}</output>
</section>
</main>
</body>
</html>
Section States
Card sections are optional. CSS adapts spacing to the authored sections and
size="sm" attribute; no directive runs for a card.
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Card State Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak>
<main class="component-state-grid" aria-label="Card state contracts">
<section
class="component-state-section"
aria-labelledby="complete-card-title"
>
<h2 id="complete-card-title">Complete card</h2>
<article aria-label="Complete card" class="card">
<header>
<h2>Quarterly planning</h2>
<p>Review the agenda before Monday.</p>
<menu>
<button variant="ghost" size="sm" type="button">Edit</button>
</menu>
</header>
<section>Four topics are ready for review.</section>
<footer>Updated today</footer>
</article>
</section>
<section
class="component-state-section"
aria-labelledby="minimal-card-title"
>
<h2 id="minimal-card-title">Minimal card</h2>
<article aria-label="Minimal card" class="card-minimal-state card">
No optional sections are required.
</article>
</section>
<section
class="component-state-section"
aria-labelledby="compact-card-title"
>
<h2 id="compact-card-title">Compact card</h2>
<article size="sm" aria-label="Compact card" class="card">
<header>
<h2>Storage</h2>
</header>
<footer>8.4 GB available</footer>
</article>
</section>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Semantic content composition.
Anatomy
Root styling selector
.card
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
size | Authored | Use sm for compact spacing; omit for the default size. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
| Variable | Purpose |
|---|---|
--card-padding-block | Block padding; defaults to four spacing units, or three for size=sm. |
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Semantic content composition. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Prefer semantic landmarks and native elements inside the layout. Any interactive handles or triggers must retain an accessible name and visible focus indicator.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.