کارت ترکیبی از یک عکس و تعدادی متن است و برای ارائه‌ی پیش‌نمایشی سریع از مجموعه‌ای از اطلاعات به کاربر مورد استفاده قرار می‌گیرد.

<page>
	<card>
		<image 
			   style="avatar"
			   src="http://www.clerksroom.com/profiles/original_836-480x480.jpg"/>
		<text>کاشان</text>
		<text><small>پنلی برای برنامه‌های آنی است</small></text>
	</card>
</page>

 

با استفاده از مشخصه‌ی style شما می‌توانید شمای یک کارت را تغییر دهید:

  • normal: شمایل معمولی کارت
  • small: عکس کارت کوچک‌تر نمایش‌داده می‌شود
  • large: عکس کارت بزرگ‌تر نمایش‌داده می‌شود


یا با استفاده از مشخصه‌ی direction جهت یک کارت را تغییر دهید:

  • normal: عکس سمت راست متن قرار می‌گیرد
  • reverse: عکس سمت چپ متن قرار می‌گیرد


به علاوه از طریق مشخصه‌ی elevated نیز می‌توان کارت را به شکل برجسته‌تر نمایش داد:

<page>
	<card elevated="true" direction="reverse" style="small">
		<image src="http://www.clerksroom.com/profiles/original_836-480x480.jpg"/>
		<text>جعفر چیزی گفته ...</text>
		<text><small>لکن چه مهم است.</small></text>
	</card>
</page>

 

برای استفاده از مشخصه‌ی elevated دقت کنید که پس‌زمینه‌ی شما کاملا سفید نباشد چرا که برای نمایش برجسته‌تر کارت‌ها زمینه‌ی آن‌ها کمی از پس‌زمینه روشن‌تر خواهد شد و این تغییر در پس‌زمینه‌ی سفید قابل مشاهده نیست.

اکشن‌های کارت‌ها

مانند دکمه‌ها، کارت‌ها نیز می‌توانند مشخصه‌ی action داشته باشند:

<page>
	<card action="someUrl/">
		<image src="http://www.clerksroom.com/profiles/original_836-480x480.jpg"/>
		<text>کاشان</text>
		<text><small>پنلی برای برنامه‌های آنی است.</small></text>
	</card>
</page>

 

این مشخصه از همان قوانین مشخصه‌ی action المان‌های دکمه تبعیت می‌نماید. با مطالعه‌ی این سند شما می‌توانید اطلاعات جامع‌تری نسبت به این قوانین کسب کنید.