Card-Style Layout Examples for Institution Analysis

Generated: 2025-07-26 19:15 UTC
Status: Template Example
Purpose: Demonstrate card-style layouts for people profiles and key information

Card-Style Layout for People Profiles

Example 1: Faculty Member Card

---

### 🎓 **Dr. Neal Shasore** 
#### *Head of School and Chief Executive*

<div style="background-color: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 4px solid #0066cc;">

<img src="../_images/faculty/neal-shasore.jpg" alt="Dr. Neal Shasore, Head of School LSA" width="150" style="float: right; margin: 0 0 20px 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">

**📍 Current Role**: Head of School/CEO (June 2021 - February 2025)  
**🎯 Specialization**: Design History, Architectural Education  
**🏫 Background**: Joined LSA as tutor in 2019  

**Key Achievements:**
- Led school through validation challenges
- Managed strategic merger negotiations
- First externally appointed Head of School

**Connect:**
- 💼 [LinkedIn Profile](https://uk.linkedin.com/in/neal-shasore-306660b7)
- 📧 Contact via LSA main office

<div style="clear: both;"></div>
</div>

---

Example 2: Key Information Card Grid

## 📊 Programme Overview Cards

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0;">

<div style="background-color: #e8f4f8; padding: 20px; border-radius: 10px; border-top: 3px solid #00a8e6;">

### 🎓 **Academic Structure**
- **Degree**: Master of Architecture
- **Duration**: 2 years  
- **Level**: Part 2 (RIBA/ARB)
- **Credits**: 240 total

</div>

<div style="background-color: #f0f8e8; padding: 20px; border-radius: 10px; border-top: 3px solid #4caf50;">

### 💰 **Financial Overview**
- **Annual Fee**: £9,000
- **Total Cost**: £18,000
- **Fee Increase**: Max 10%/year
- **Payment**: Termly options

</div>

<div style="background-color: #fff3e0; padding: 20px; border-radius: 10px; border-top: 3px solid #ff9800;">

### 🏢 **Practice Integration**
- **Work Days**: 3 per week
- **Study Days**: 2 per week  
- **Partners**: 200+ practices
- **Location**: London-wide

</div>

</div>

Example 3: Risk Assessment Cards

## ⚠️ Risk Assessment Dashboard

<div style="margin: 20px 0;">

<!-- High Risk Card -->
<div style="background-color: #ffebee; padding: 20px; border-radius: 10px; margin-bottom: 15px; border-left: 5px solid #f44336;">

### 🔴 **HIGH RISK: Practice Placement Liability**
**Impact**: Severe | **Likelihood**: Medium

The University disclaims ALL liability for workplace incidents, injuries, or disputes during mandatory practice placements. Students bear complete personal risk.

**Mitigation Required**: 
- Professional indemnity insurance
- Personal accident coverage
- Legal consultation before enrollment

</div>

<!-- Medium Risk Card -->
<div style="background-color: #fff8e1; padding: 20px; border-radius: 10px; margin-bottom: 15px; border-left: 5px solid #ffc107;">

### 🟡 **MEDIUM RISK: Fee Increases**
**Impact**: Moderate | **Likelihood**: High

Annual fee increases up to 10% permitted, potentially adding £2,000 to total programme cost.

**Mitigation Options**:
- Budget for maximum increases
- Explore scholarship opportunities
- Consider part-time study options

</div>

<!-- Low Risk Card -->
<div style="background-color: #e8f5e9; padding: 20px; border-radius: 10px; margin-bottom: 15px; border-left: 5px solid #4caf50;">

### 🟢 **LOW RISK: Programme Continuity**
**Impact**: Low | **Likelihood**: Low

Strong institutional backing through UCEM merger ensures programme stability.

**Positive Factors**:
- University validation secured
- 200+ practice partnerships
- Growing student numbers

</div>

</div>

Example 4: Timeline/Process Cards

## 📅 Student Journey Timeline

<div style="position: relative; padding: 20px 0;">

<!-- Year 1 Card -->
<div style="background: linear-gradient(to right, #e3f2fd, #f5f5f5); padding: 20px; border-radius: 10px; margin-bottom: 20px; position: relative;">

### **Year 1: Foundation & Practice**
<div style="display: flex; justify-content: space-between; align-items: start;">
<div style="flex: 1;">

**Academic Focus**:
- Design Studios (2 days/week)
- Critical Practice Module
- Urban Studies

</div>
<div style="flex: 1; margin-left: 20px;">

**Practice Experience**:
- 3 days/week employment
- Real project involvement
- Professional mentorship

</div>
</div>

<div style="position: absolute; right: 20px; top: 20px; background: #1976d2; color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.9em;">
Terms 1-3
</div>
</div>

<!-- Year 2 Card -->
<div style="background: linear-gradient(to right, #f3e5f5, #f5f5f5); padding: 20px; border-radius: 10px; position: relative;">

### **Year 2: Specialization & Thesis**
<div style="display: flex; justify-content: space-between; align-items: start;">
<div style="flex: 1;">

**Academic Focus**:
- Advanced Design Studio
- Thesis Project
- Professional Studies

</div>
<div style="flex: 1; margin-left: 20px;">

**Career Development**:
- Portfolio refinement
- Part 3 preparation
- Network building

</div>
</div>

<div style="position: absolute; right: 20px; top: 20px; background: #7b1fa2; color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.9em;">
Terms 4-6
</div>
</div>

</div>

Example 5: Comparison Cards

## 🏛️ Institution Comparison

<div style="overflow-x: auto;">
<div style="display: flex; gap: 20px; min-width: 800px; margin: 20px 0;">

<!-- LSA Card -->
<div style="min-width: 250px; background: #f0f7ff; padding: 20px; border-radius: 10px; border: 2px solid #2196f3;">

### **LSA**
<div style="text-align: center; font-size: 2em; color: #2196f3; margin: 10px 0;">£9,000</div>
<div style="text-align: center; color: #666; margin-bottom: 15px;">per year</div>

✅ Work-integrated model  
✅ 200+ practice network  
✅ Cost-neutral potential  
⚠️ No international visa  
⚠️ High liability risk  

**Best for**: UK students seeking practical experience

</div>

<!-- UCL Card -->
<div style="min-width: 250px; background: #fef7f0; padding: 20px; border-radius: 10px; border: 2px solid #ff9800;">

### **UCL Bartlett**
<div style="text-align: center; font-size: 2em; color: #ff9800; margin: 10px 0;">£29,000</div>
<div style="text-align: center; color: #666; margin-bottom: 15px;">per year (int'l)</div>

✅ Global #1 ranking  
✅ Research excellence  
✅ International visa  
❌ High cost  
⚠️ Limited practice time  

**Best for**: International students, research focus

</div>

<!-- Cambridge Card -->
<div style="min-width: 250px; background: #f0fef7; padding: 20px; border-radius: 10px; border: 2px solid #4caf50;">

### **Cambridge**  
<div style="text-align: center; font-size: 2em; color: #4caf50; margin: 10px 0;">£36,500</div>
<div style="text-align: center; color: #666; margin-bottom: 15px;">per year (int'l)</div>

✅ Prestigious degree  
✅ College system  
✅ Historic setting  
❌ Highest fees  
❌ Traditional model  

**Best for**: Prestige seekers, theoretical focus

</div>

</div>
</div>

Implementation Notes

When to Use Card-Style Layouts

People Profiles: Faculty, leadership, board members
Key Information: Programme details, requirements, costs
Comparisons: Side-by-side institutional or programme comparisons
Risk Assessments: Visual hierarchy for different risk levels
Process/Timeline: Student journey or application processes
Statistics: Key metrics and data points

Design Principles

Visual Hierarchy: Use color, borders, and spacing to create clear sections
Consistent Styling: Maintain similar padding, border-radius, and color schemes
Responsive Design: Use grid layouts that adapt to screen sizes
Accessibility: Ensure sufficient color contrast and clear structure
Print-Friendly: Consider how cards appear when printed

Color Schemes

Blue tones (#e3f2fd, #2196f3): Academic information, primary content
Green tones (#e8f5e9, #4caf50): Positive information, low risk
Orange/Yellow (#fff8e1, #ff9800): Warnings, medium risk, costs
Red tones (#ffebee, #f44336): High risk, critical warnings
Purple tones (#f3e5f5, #7b1fa2): Special programs, unique features
Gray tones (#f5f5f5, #e0e0e0): Neutral information, backgrounds

Markdown Limitations

Note: Pure Markdown doesn't support all styling. These examples use inline HTML/CSS which renders in many Markdown viewers (GitHub, VSCode, etc.) but may not work in all contexts. For maximum compatibility, consider:

Using simple Markdown tables for comparisons
Bold/italic text for emphasis
Blockquotes for callout information
Horizontal rules for visual separation
Emoji for visual indicators