3F Design v1.121.1
Documentation
Playground
Changelog
Guides
GIT (opens new window)
NPM (opens new window)
Documentation
Playground
Changelog
Guides
GIT (opens new window)
NPM (opens new window)
  • General

    • Getting Started
    • SEO Recommendations
    • Template Syntax
  • Layout

    • Page layout
    • Navigation
    • Hero
    • Footer
    • Grid
    • Utilities for layout
    • Color variants
  • Components

    • Accordion
    • Alerts
    • Announce
    • Button
    • Byline
    • Card
    • Datatable
    • Date
    • Embed
    • Fade
    • Feedback
    • Form
    • Icon
    • Image
    • Inline
    • Loading
    • Magazine
    • Map
    • Modal
    • PDF
    • Quote
    • Ribbon
    • Search
    • Searchable select
    • Stack
    • Tabs
    • Table
    • Tag
    • Text
    • Toast
  • Compositions

    • Article
    • Login
    • Discipline specific content
    • Display options and filtering
    • Paywall
    • Chat
    • Card content layouts
      • Who is who
      • Zig zag
      • New membership
      • Search results
      • Contact page
      • 3F en fagforening for mig
      • Hero slider
    • Utilities

      • Data
      • Fetch
      • Helpers
      • Internet Explorer
      • Render
      • Scroll-to
      • Session timeout
      • Tooltip
      • Tracking

    # Card content layouts

    The layout of card content can be styled using the built in layout utilities. Below is a few examples:

    # Vertically centered content

    # 3 columns

    # Icon cards with button aligned to bottom

    # Responsive clickable cards with icons

    This layout left aligns the icon and hides the description text on smaller screens.

    ← Chat Who is who →