Skip to main content
Version: 12.10.0

Course Card Component

Course card contains multiple card variants that all include a large image element in addition to title, description, Rating Location information,Time information etc. The whole course card is tappable

Card Type:

  • Basic - This card type containing Image, Title and Description

  • Yuble - This card type containing Image, Rating, Title, Description and Location informations.

  • Queuo - This card type containing Image, Title, Pill view, Location and Time informations.

Parameters:

/// - image: Display image on course card /// - title: Title of course card /// - rating: Rating value /// - description: Description of course card /// - pillText: Text on pill /// - address: Address of course card /// - date: Date of course card /// - time: Time of course card

Style Parameters:

/// - backgoundColor: Set backgoundColor for course card /// - pillColor: Color of pill /// - mapIconColor: Map icon color /// - timeIconColor: Time icon color

Features

  • Update Image, Rating, Title, Pill text, Description, Location and Time informations

Installation

  1. Copy the CourseCard component folder into your Xcode project.

  2. Use the OCCourseCardView view in your SwiftUI code:

import SwiftUI

struct ContentView: View

var body: some View {
VStack {
let title = "Course card title"
let description = "Teasertext goes here in maximum of four lines. Cut off (after number of characters/words, when line ends?) with three dots. "
let address = ["Address Line 1", "Address Line 2"]
let courseCardData = OCCourseCardData(image: .local(image: Image("PlaceholderFeedCard"), title: title, rating: 3.5, description: description, pillText: "Label", address: address, date: "Date", time: "Time")

OCCourseCard(cardType: .yuble, cardData: courseCardData, onSelectCard: { cardInfo in
debugPrint("Course Card \(cardInfo.title ?? .empty) selected")
})
}.padding(.horizontal, 16)
}
}