🧒
Sunbird ED
new release -7.0.0 (Jun 2024)Askdot
latest
latest
  • Learn
    • Overview
    • Capabilities
      • Learning Apps
      • Asset Sourcing
      • Organised Collections
      • Discover Content - Digital & Phygital
      • User Engagement
      • Rich and diverse content
      • Versatile Question Bank
      • Observability
      • Launch Course
      • Verifiable Credentials
      • Multi-Channel Chatbot
      • Targeted Programs
      • Manage Learn
        • Overview
        • What is an entity?
        • What is a Program?
        • What is a Project?
        • What is Observation?
        • What is a Survey?
        • What is Observation as a task inside a Project?
      • Product and Developer's Guide
        • Learning apps
          • Workflows
            • Onboarding of Users
            • Discovery of Content
            • Play content
            • Track progress and Earn credentials
            • Interacting / Collaborating
        • Asset Sourcing
        • Organised Collections
        • Discover Content - Digital & Phygital
        • User Engagement
        • Rich and Diverse Content
        • Versatile Question Bank
        • Observability
        • Launch Courses
        • Verifiable Credentials
        • Multi-Channel Chatbot
        • Targeted Programs
        • Manage Learn
          • Overview
          • Component Diagram
          • ML Core Service
          • ML Project Service
          • ML Survey Service
          • ML Report Service
          • ML Analytics Service
    • Tech Overview
      • Design Principles
      • Technical Architecture Diagram
      • Tech Stack
    • Adopters
      • DIKSHA
    • Roadmap
      • Plan for 2025-2026
      • Releases and Dates
  • USE
    • Getting Started - Setup
      • Pre-requisites
      • Install
      • Functional Configurations
    • Developer Guide - Overview
      • Architecture - Component Diagram
      • System Requirements
        • Learning Apps
      • Install Locally
        • SunbirdED Mobile
        • SunbirdED Portal
      • Easy Installer
        • Adding Support for a New Cloud Provider
      • Configuration
        • SunbirdEd Portal
        • Sunbird Mobile
      • Portal
        • Component Diagram
        • I18N (Resource Bundles)
        • Branding Name and Logo Configuration Guide
      • Desktop
        • Component Diagram
      • Mobile
        • Component Diagram
        • sunbird-mobile-sdk
        • Sunbird-mobile-app plugins
        • Configurations to setup mobile app
        • I18N (Resource Bundles)
      • Form service
        • Component Diagram
        • Data model
        • API's
      • Manage Learn
        • ML Core Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Project Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Survey Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Report Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Analytics Service
          • Overview
          • Component Diagram
          • Data Model
          • Setup Guide
            • ENV Variables ( Config.ini)
          • Ingestions
          • Folder Structure
          • Report creation and Updation Scripts
          • Deployment Overview
      • UI (User interface)
        • Angular Material
          • Overview
          • Installation
          • Material Icons
          • Components Usage
          • Theming
          • Theme Setup
          • Customazion
            • Palette
            • Theme
            • Accessibility
            • Colors
            • Typography
            • Components
              • Buttons
              • CC Components
        • Component Style Guide Version 1
          • Accordion
          • Buttons
          • Cards
          • Forms
          • Grid & Layout
          • Labels
          • Modals
          • Pagination
          • Rating
          • Search Box
          • Select Box
          • Tables
          • Tabs
          • Toast messages
          • Tooltip
          • Typography
        • SB-Styles: A Comprehensive Design Resource
        • SB-Themes Repository: Unifying Design Across Platforms
          • Classical Theme in Sunbird-Ed portal
          • Joyful Theme in Sunbird-Ed portal:
      • Reference Apps
        • Independent Libraries
          • Common Consumption Components
          • SunbirdEd Forms
          • Sunbird Client Services
          • Sunbird Styles
          • Sunbird Themes
          • Sunbird Tag Manager
      • API's
      • CSP changes
      • Cloud-Store SDK Maven Deployment Guide
      • Other
        • Building Images
        • Minimal forms
        • Telemetry
          • Trackable Collection
        • Platform
        • Learning Apps
    • Learn More
      • Dependencies
      • Specifications
        • SOFIE
        • SOFIE Implementation
  • SB Ed Releases
    • Sunbird v7.6.0 (Latest)
    • Sunbird v7.5.1
    • Release - SB 7.5
    • SB Release - 7.0.0
      • Release notes
      • Updating Sunbird Releases
        • 6.0.1 to 7.0.0
      • Release Calendar 7.0.0
      • Demo of released items
  • Engage
    • Discuss
    • Contribute to Sunbird ED
    • Extend / Contribute to Sunbird
    • Issue tracker/ Create Issue
  • Misc
    • Templates
      • Upgrade Sunbird release document
      • Release Notes
    • Misc Pages
      • Portal - Manage Learn - Reports
      • App - Manage Learn - component diagram
        • Projects
        • Observation & Survey
        • Program
      • Portal - Manage Learn - component diagram
      • Mobile form configurations
      • Content Indexing Flow
      • What are multiple databases used for
      • Course completion, reports and certificate issue
      • How to access Flink UI
      • What are all the flink jobs for
      • How does data flow into Druid
      • Minimal build properties
      • Delete User Functionality
    • Archived
      • High Level Capabilities
      • Workflows
      • Where Sunbird ED helps you
      • ED - Mobile App (going to archive)
        • 4.10.3 to 5.0.0
        • 5.0.0 to 5.1.0
      • Setting up Sunbird ED
      • Developer Documentation
      • API Reference Documentation
      • Detailed Documentation
      • Source Code
      • Actors & Actions
      • Detailed Capabilities
      • Data
      • Terminology
      • 5.1.0-hotfix (OCI )
      • Getting started (v7)
        • Deployment Overview
        • Pre-requisites
        • Install
          • Provision Cloud Infrastructure
          • Setup Jenkins
          • Update Ansible Variables
          • Build, Provision and Deploy
          • Functional Configurations
Powered by GitBook
On this page
  1. USE
  2. Developer Guide - Overview
  3. UI (User interface)
  4. Component Style Guide Version 1

Cards

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

Variations:

Card Type-1 for Default theme:

<div class="sb-card" tabindex="0">
  <div class="sb-card-body">
    <div class="sb-card-metas">
      <div class="sb-card-image mr-16"><img src="assets/images/book.png"></div>
      <div class="sb-card-meta non-course">
        <div class="d-flex mb-auto">
          <div class="sb-card-label">Worksheet</div>
          <img src="assets/images/badge1.png" class="sb-card-badge ml-auto">
        </div>
        <div class="sb-card-meta-item ellipsis">Subject : English</div>
        <div class="sb-card-meta-item ellipsis mt-4">
          Class : Class 1,Class 2,Class 3,Class 4,Class 5
        </div>
        <div class="sb-card-meta-item ellipsis mt-4"> Medium : Other</div>
      </div>
    </div>
    <h4 class="sb-card-title"> Structure and Algorithm - Assignment 1 Paperback
    </h4>
    <div class="sb-card-org ellipsis">Academy of European Law (ERA)
    </div>
  </div>
  <div class="sb-card-progressbar">/div>
</div>

Card Type-2 for Default Theme:

<div class="sb--card mb-16" tabindex="0" role="button">
        <div class="sb--card__main-area">
            <!-- card img -->
            <div class="sb--card__img">
                <div class="img-container"><img alt="" src="https://material.angular.io/assets/img/examples/shiba2.jpg"></div>
            </div>
            <!-- card mobile view details -->
            <div class="sb--card__info">
                <div class="sb--card__meta1">
                    <h4 class="sb--card__title sb__ellipsis sb__ellipsis--two text-left flex-basis-1" title="Title comes here">
                    Title comes here</h4>
                    <a aria-label="View more actions" class="menu" role="button" tabindex="0"></a>
                </div>  
        
                <div class="sb--card__meta1 text-left">
                    <span class="data_1 ellipsis" title="subject comes here">dsubject comes here</span>
                    <span class="dot-divider"></span>
                    <span class="data_2 ellipsis" title="grade level comes here">grade level comes here</span>
                </div>
            </div>
        </div>
        <div class="sb--card__moreinfo">
            <div class="sb--card__meta2 text-left">
                <div class="sb--card__meta2_data">Medium: medium</div>
                <div class="sb--card__org sb__ellipsis">organisation</div>
            </div>
            <div class="sb--card__tags">
                <span class="sb--card__badge"><img alt="" title=""
                        src="https://material.angular.io/assets/img/examples/shiba2.jpg"></span>
                <span class="sb--card__type">resourceType</span>
            </div>
        </div>
    </div>

Card Type-3 for Joy Theme:

<div class="sb--card sb--card--theme2" role="link" tabindex="0">
      <svg width="79px" class="sb--card-svg-tail" height="36px" viewBox="0 0 79 36" version="1.1"
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g class="sb--card-svg-tail__rc" transform="translate(-735.000000, -524.000000)">
            <g transform="translate(517.000000, 338.000000)">
              <g>
                <path
                  d="M224.269945,224.907985 C224.269945,224.907985 217.096964,205.264724 219.487958,199.23369 C221.878951,193.203161 229.905965,205.609232 231.442925,210.261729 C231.442925,210.261729 230.930605,187 237.762123,187 C244.59339,187 245.447423,217.498667 245.447423,217.498667 C245.447423,217.498667 247.838417,203.54168 252.27894,203.54168 C256.719214,203.54168 251.424907,219.049331 253.645044,218.704823 C255.865431,218.360315 264.612662,211.290301 270.931859,218.871747 C277.250806,226.453445 274.347493,238.1705 281.17901,237.998119 C288.010277,237.825992 268.503575,211.123125 272.431528,205.95374 C276.359732,200.784607 286.265169,212.84617 287.119203,215.94775 C287.119203,215.94775 286.606883,199.23369 291.218013,199.23369 C295.829393,199.23369 296,223.18494 296,223.18494 L224.269945,224.907985 Z">
                </path>
              </g>
            </g>
          </g>
        </g>
      </svg>
      <div class="sb--card__main-area">
        <!-- card img -->
        <div class="sb--card__img sb--card__image-pos">
          <div class="img-container">
            <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="">
          </div>
        </div>
        <div class="sb--card__svg-area">
          <img src="https://staging.sunbirded.org/assets/common-consumption/images/abstract_02.svg" alt=""/>
        </div>
        <div class="sb--card__type">Card type</div>
      </div>
    
      <!-- card mobile view details -->
      <div class="sb--card__info">
        <div class="sb--card__meta">
          <h4 class="sb--card__title sb__ellipsis sb__ellipsis--two text-left flex-basis-1" title="">
            Content Name</h4>
        </div>
        <div class="sb--card__meta1 text-left">
            <span class="data_0 mr-8 organisation" title="">organisation</span>
            <span class="data_0 mr-8" title="">+11</span>
    
            <span class="data_1 mr-8 medium" title="">Medium</span>
            <span class="data_1 mr-8" title="">+3</span>
    
            <span class="data_2" title="">Grade level</span>
            <span class="data_2" title="">+4</span>
        </div>
      </div>
      <!-- content for only desktop -->
      <div>
        <div class="sb--card__moreinfo">
          <!-- other meta info subject, publisher/organizer etc -->
          <div class="sb--card__meta2 text-left">
              <div class="sb--card__meta2_data sb__ellipsis subject">
                <span>Subject: </span> <span title="">Telugu</span> <span class="data_1 mr-8" title=""> +5
                </span>
              </div>
              <div class="sb--card__meta2_data sb__ellipsis organisation">
                <span>Publisher: </span> <span title="">Org</span>
                <span class="data_1 mr-8" title=""> +6
                </span>
              </div>
          </div>
          </div>
        </div>
      </div>
    </div>
https://sunbird-ed.github.io/sunbird-style-guide/dist/#/cards