Cards play a pivotal role in the Sunbird-Ed portal's design, facilitating organized content presentation. What sets our approach apart is the use of pure HTML and SCSS, ensuring a structured and modular development process. This approach simplifies customization while maintaining consistency with our style guide.
Moreover, we've implemented theme-specific card styles to cater to diverse user preferences. Whether it's the vibrant Joy theme or its darker counterpart, each theme comes with distinct card styling, offering a visually harmonious and immersive user experience.
Key Features:
Responsiveness: Our cards are designed to adapt seamlessly to various screen sizes and devices, ensuring a user-friendly experience.
Consistency: A standardized card structure simplifies navigation and access to content throughout the portal.
Customization: While adhering to our style guide, we've built flexibility into our card design, enabling users to tailor card styles according to their specific branding and content needs.
Enhanced Content Presentation: Cards are instrumental in making information more digestible and visually appealing, enhancing the overall user experience.
In summary, our use of cards in the Sunbird-Ed portal combines functional design with adaptability and aesthetics, all while offering customization options that align with user preferences and branding requirements. For more information please refer to this link https://sunbird-ed.github.io/sunbird-style-guide/dist/#/cards
Variations:
Card Type-1 for Default theme:
<divclass="sb-card"tabindex="0"> <divclass="sb-card-body"> <divclass="sb-card-metas"> <divclass="sb-card-image mr-16"><imgsrc="assets/images/book.png"></div> <divclass="sb-card-meta non-course"> <divclass="d-flex mb-auto"> <divclass="sb-card-label">Worksheet</div> <imgsrc="assets/images/badge1.png"class="sb-card-badge ml-auto"> </div> <divclass="sb-card-meta-item ellipsis">Subject : English</div> <divclass="sb-card-meta-item ellipsis mt-4"> Class : Class 1,Class 2,Class 3,Class 4,Class 5 </div> <divclass="sb-card-meta-item ellipsis mt-4"> Medium : Other</div> </div> </div> <h4class="sb-card-title"> Structure and Algorithm - Assignment 1 Paperback </h4> <divclass="sb-card-org ellipsis">Academy of European Law (ERA) </div> </div> <divclass="sb-card-progressbar">/div></div>
Card Type-2 for Default Theme:
<divclass="sb--card mb-16"tabindex="0"role="button"> <divclass="sb--card__main-area"><!-- card img --> <divclass="sb--card__img"> <divclass="img-container"><imgalt=""src="https://material.angular.io/assets/img/examples/shiba2.jpg"></div> </div><!-- card mobile view details --> <divclass="sb--card__info"> <divclass="sb--card__meta1"> <h4class="sb--card__title sb__ellipsis sb__ellipsis--two text-left flex-basis-1"title="Title comes here"> Title comes here</h4> <aaria-label="View more actions"class="menu"role="button"tabindex="0"></a> </div> <divclass="sb--card__meta1 text-left"> <spanclass="data_1 ellipsis"title="subject comes here">dsubject comes here</span> <spanclass="dot-divider"></span> <spanclass="data_2 ellipsis"title="grade level comes here">grade level comes here</span> </div> </div> </div> <divclass="sb--card__moreinfo"> <divclass="sb--card__meta2 text-left"> <divclass="sb--card__meta2_data">Medium: medium</div> <divclass="sb--card__org sb__ellipsis">organisation</div> </div> <divclass="sb--card__tags"> <spanclass="sb--card__badge"><imgalt=""title=""src="https://material.angular.io/assets/img/examples/shiba2.jpg"></span> <spanclass="sb--card__type">resourceType</span> </div> </div> </div>
