Social Humour Card Component

A simple, reusable card component that can be imported into front-end frameworks like Angular, React, etc.

Features

• Two card variants: dark (black background with white text) and light (white background with black text)
• 2:3 proportions for optimal display
• Text left-aligned from top
• Small logo in the bottom left corner
• Responsive design with padding on all sides
• Framework agnostic - can be used with any front-end framework or vanilla JavaScript

Installation

npm install social-humour-card

Usage

HTML/CSS Usage

You can use the component directly in your HTML:

<div class="social-humour-card dark">
    <div class="card-content">
        Your content here
    </div>
    <div class="card-logo" style="background-image: url('path/to/logo.png');"></div>
</div>

JavaScript Usage

// Import the library
import { createSocialHumourCard } from 'social-humour-card';

// Create a card
const card = createSocialHumourCard({
    type: 'dark', // or 'light'
    content: 'Your content here',
    logoUrl: 'path/to/logo.png',
    container: '#card-container' // Optional: CSS selector for container
});

// If you didn't specify a container, you can append it manually
document.querySelector('#my-container').appendChild(card);

React Usage

// Standard import
import { SocialHumourCard } from 'social-humour-card';

// Or import directly from the React entry point
import { SocialHumourCard } from 'social-humour-card/react';

function App() {
    return (
        <SocialHumourCard 
            type="dark"
            content="Your content here"
            logoUrl="path/to/logo.png"
        />
    );
}

// You can also use children instead of content prop
function AppWithChildren() {
    return (
        <SocialHumourCard 
            type="dark"
            logoUrl="path/to/logo.png"
        >
            Your content here
        </SocialHumourCard>
    );
}

Angular Usage

NgModule-based Angular Projects

// In your module
import { SocialHumourCardModule } from 'social-humour-card/angular';

@NgModule({
    imports: [SocialHumourCardModule]
})
export class YourModule { }

// In your component template
<social-humour-card 
    [type]="'dark'"
    [content]="'Your content here'"
    [logoUrl]="'path/to/logo.png'">
</social-humour-card>

// Or with content projection
<social-humour-card 
    [type]="'dark'"
    [logoUrl]="'path/to/logo.png'">
    Your content here
</social-humour-card>

Standalone Angular Projects

For Angular 14+ projects using standalone components:

// In your standalone component
import { Component } from '@angular/core';
import { SocialHumourCardComponent } from 'social-humour-card/angular';

@Component({
    selector: 'app-my-component',
    template: `
        <social-humour-card 
            [type]="'dark'"
            [content]="'Your content here'"
            [logoUrl]="'path/to/logo.png'">
        </social-humour-card>
    `,
    standalone: true,
    imports: [SocialHumourCardComponent]
})
export class MyComponent { }

For Angular 16+ projects using standalone bootstrapping:

// In your main.ts file
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
import { SocialHumourCardModule } from 'social-humour-card/angular';

bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(SocialHumourCardModule)
    ]
});

// Then in your standalone AppComponent
import { Component } from '@angular/core';
import { SocialHumourCardComponent } from 'social-humour-card/angular';

@Component({
    selector: 'app-root',
    template: `
        <social-humour-card 
            [type]="'dark'"
            [content]="'Your content here'"
            [logoUrl]="'path/to/logo.png'">
        </social-humour-card>
    `,
    standalone: true,
    imports: [SocialHumourCardComponent]
})
export class AppComponent { }

For Angular 19+ projects using standalone components:

// In your standalone component
import { Component } from '@angular/core';
import { SocialHumourCardComponent } from 'social-humour-card/angular';

@Component({
    selector: 'app-my-component',
    template: `
        <social-humour-card 
            [type]="'dark'"
            [content]="'Your content here'"
            [logoUrl]="'path/to/logo.png'">
        </social-humour-card>
    `,
    standalone: true,
    imports: [SocialHumourCardComponent]
})
export class MyComponent { }

For Angular 19+ projects using standalone bootstrapping:

// In your main.ts file
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
    providers: [
        provideHttpClient()
        // No need to import SocialHumourCardModule as the component is standalone
    ]
});

// Then in your standalone AppComponent
import { Component } from '@angular/core';
import { SocialHumourCardComponent } from 'social-humour-card/angular';

@Component({
    selector: 'app-root',
    template: `
        <social-humour-card 
            [type]="'dark'"
            [content]="'Your content here'"
            [logoUrl]="'path/to/logo.png'">
        </social-humour-card>
    `,
    standalone: true,
    imports: [SocialHumourCardComponent]
})
export class AppComponent { }

API Reference

Card Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | type | string | 'dark' | Card type: 'dark' or 'light' | | content | string | '' | Text content for the card | | logoUrl | string | '' | URL for the logo image | | container | string | null | CSS selector for the container element |

Demo

A demo page is included in the package. After installation, you can find it at:

node_modules/social-humour-card/dist/demo.html

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT