카드

카드 (Card)

이미지, 헤더, 메타데이터, 설명, 액션 등 다양한 콘텐츠를 담을 수 있는 표준 UI 빌딩 블록이에요. 단일 카드 또는 카드 그룹으로 사용해요.

출처: 문서

본문

유형 (Types)

카드 (Card)

단일 카드예요.

Kristy
        
          Joined in 2013
        
        
          Kristy is an art director living in New York.
        
      
      
        
          
          22 Friends
14h
         Elliot
      
      
        
      
      
        
          
          17 likes
        
        
        3 comments

카드들 (Cards)

카드 그룹이에요.

Elliot Fu
          
          
            Friends of Veronika
          
          
            Elliot requested permission to view your contact details
          
        
        
          
            Approve
            Decline
          
        
      
      
        
          
          
            Jenny Hess
          
          
            New Member
          
          
            Jenny wants to add you to the group best friends
          
        
        
          
            Approve
            Decline
Matt Giampietro
          
            Friends
          
          
            Matthew is an interior designer living in New York.
          
        
        
          
            Joined in 2013
          
          
            
            75 Friends
          
        
      
      
        
          
        
        Molly
          
            Coworker
          
          
            Molly is a personal assistant living in Paris.
          
        
        
          
            Joined in 2011
          
          
            
            35 Friends
          
        
      
      
        
          
        
        Elyse
          
            Coworker
          
          
            Elyse is a copywriter working in New York.
          
        
        
          
            Joined in 2014
          
          
            
            151 Friends

콘텐츠 (Content)

콘텐츠 블록 (Content Block)

카드는 콘텐츠 블록을 포함할 수 있어요.

Project Timeline
      
      
        
        
          
            
              
                 Elliot Fu added Jenny Hess to the project
              
            
          
          
            
              
                 Stevie Feliciano was added as an Administrator
              
            
          
          
            
              
                 Helen Troy added two pictures
              
            
          
        
      
      
        Join Project

이미지 (Image)

카드는 이미지를 포함할 수 있어요.

Team Fu & Hess
        
          Created in Sep 2014
        
      
      
        
          
          2 Members
$('.special.cards .image').dimmer({
    // As hover is not working on mobile, you might use click on those devices as fallback
      on: 'ontouchstart' in document.documentElement ? 'click' : 'hover'
    });
    
    
      
        
          
            
              
                Add Friend
              
            
          
          
        
        Team Fu
          
            Created in Sep 2014
          
        
        
          
            
            2 Members
          
        
      
      
        
          
            
              
                Add Friend
              
            
          
          
        
        Team Hess
          
            Created in Aug 2014
          
        
        
          
            
            2 Members

헤더 (Header)

카드는 헤더를 포함할 수 있어요.

Elliot Fu
          Friend
          
            Elliot Fu is a film-maker from New York.
          
        
        
          Veronika Ossi
          Friend
          
            Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
          
        
        
          
          Jenny Hess
          Friend
          
            Jenny is a student studying Media Management at the New School

메타데이터 (Metadata)

카드는 콘텐츠 메타데이터를 포함할 수 있어요.

Cute Dog
        
          2 days ago
          Animals

링크 (Link)

카드는 이미지, 헤더 또는 콘텐츠 안에 링크를 포함할 수 있어요.

Steve Jobes
        
          Last Seen 2 days ago

버튼 (Buttons)

카드는 버튼을 포함할 수 있어요.

Elliot Fu
          
            Elliot Fu is a film-maker from New York.
          
        
        
          
          Add Friend
        
      
      
        Veronika Ossi
          
            Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
          
        
        
          
          Add Friend
        
      
      
        Jenny Hess
          
            Jenny is a student studying Media Management at the New School
          
        
        
          
          Add Friend

승인 (Approval)

카드는 like나 star 액션을 포함할 수 있어요.

Cute Dog
        
          
        
      
      
        
          
          Like
        
        
          
          Favorite

설명 (Description)

카드는 하나 이상의 문단으로 된 설명을 포함할 수 있어요.

Cute Dog
        2 days ago

추가 콘텐츠 (Extra Content)

카드는 메인 콘텐츠와 별도로 형식을 지정하려는 추가 콘텐츠를 포함할 수 있어요.

Cute Dog
        2 days ago
        
          
          
        
        
      
      
        
        121 Votes

상태 (States)

비활성화 (Disabled)

카드는 그 콘텐츠가 비활성화되었음을 보여 줄 수 있어요.

Kristy
          
            Joined in 2013
          
          
            Kristy is an art director living in New York.
          
        
        
          
            
            22 Friends

로딩 (Loading)

카드는 콘텐츠가 로드 중임을 보여 줄 수 있어요.

Kristy
          
            Joined in 2013
          
          
            Kristy is an art director living in New York.
          
        
        
          
            
            22 Friends

로더는 카드의 색을 상속해요. 이를 막으려면 일반 class를 추가해서 로더 색은 기본값으로 유지하면서 카드만 색을 갖게 할 수 있어요.

Kristy
          
            Joined in 2013
          
          
            Kristy is an art director living in New York.
          
        
        
          
            
            22 Friends
          
        
    
    
        
          Kristy
          
            Joined in 2013
          
          
            Kristy is an art director living in New York.
          
        
        
          
            
            22 Friends

변형 (Variations)

플루이드 카드 (Fluid Card)

플루이드 카드는 컨테이너의 너비를 차지해요.

Daniel Louise
          
        
        
      
      
        
          
            
          
          
            Helen Troy
          
        
      
      
        
          
            
          
          
            Elliot Fu

중앙 정렬 카드 (Centered Card)

카드는 컨테이너 안에서 스스로 중앙 정렬할 수 있어요.

Elyse

가로 카드 (Horizontal Cards)

카드를 가로로 표시할 수 있어요.

Cute Dog
        
          Animals
Matt Giampietro
          
            Friends
          
          
            Matthew is an interior designer living in New York.
          
        
        
          
        
        Molly
          
            Coworker
          
          
            Molly is a personal assistant living in Paris.

돌출 카드 (Raised Card)

카드를 페이지 위로 솟아오르게 형식 지정할 수 있어요.

Cute Dog
        
          Animals
        
        
          
        
      
      
        
           Matt
Cute Dog
        
          Animals
        
        
          
        
      
      
        
           Matt

링크 카드 (Link Card)

카드 전체 내용이 다른 페이지로 연결되도록 형식 지정할 수 있어요.

Cute Dog
        
          Animals
        
        
          
        
      
      
        
           Matt
Cute Dog
        
          Animals
        
        
          
        
      
      
        
           Matt

플로트 콘텐츠 (Floated Content)

어떤 콘텐츠 요소든 왼쪽이나 오른쪽으로 플로트할 수 있어요.

Cute Dog
        
          2 days ago
          Animals
        
        
          
        
      
      
        
           Matt

텍스트 정렬 (Text Alignment)

카드 안의 어떤 요소든 텍스트 정렬을 지정할 수 있어요.

Jenny Hess
        
          
        
      
      
        
           Jenny

반전 (Inverted)

카드의 색상을 반전할 수 있어요.

Matt Giampietro
            
              Friends
            
            
              Matthew is an interior designer living in New York.
            
          
          
            
              Joined in 2013
            
            
              
              75 Friends
            
          
        
          
            
          
          
            Molly
            
              Coworker
            
            
              Molly is a personal assistant living in Paris.
            
          
          
            
              Joined in 2011
            
            
              
              35 Friends
            
          
        
          
            
          
          
            Elyse
            
              Coworker
            
            
              Elyse is a copywriter working in New York.
            
          
          
            
              Joined in 2014
            
            
              
              151 Friends

색상 (Colored)

카드는 색상을 지정할 수 있어요.

기본 (Basic)

기본 카드는 테두리가 없고 전체 색상 배경도 지원해요.

열 개수 (Column Count)

카드 그룹은 한 줄에 몇 개의 카드가 존재할지 설정할 수 있어요.

Rating:
          
        
        
      
        
          
        
        Rating:
          
        
      
      
        
          
        
        Rating:
          
        
      
      
        
          
        
        Rating:
          
        
      
      
        
          
        
        Rating:
          
        
      
      
        
          
        
        Rating:
          
        
      
      
        
          
        
        Rating:
          
        
      
      
        
          
        
        Rating:

스택 가능 (Stackable)

카드 그룹은 모바일 기기에서 행을 단일 열로 자동으로 쌓을 수 있어요.

더블링 (Doubling)

카드 그룹은 모바일에서 열 너비를 두 배로 늘릴 수 있어요.

크기 (Size)

카드 텍스트 크기를 다르게 할 수 있어요.

Mini Card
            
              Variant
            
            
              This is a mini card
            
          
          
            
               Fomantic-UI
            
        
        
          
            Tiny Card
            
              Variant
            
            
              This is a tiny card
            
          
          
            
               Fomantic-UI
            
        
        
          
            Small Card
            
              Variant
            
            
              This is a small card
            
          
          
            
               Fomantic-UI
            
    
    
        
          
            Large Card
            
              Variant
            
            
              This is a large card
            
          
          
            
               Fomantic-UI
            
        
        
          
            Big Card
            
              Variant
            
            
              This is a big card
            
          
          
            
               Fomantic-UI
            
    
    
        
          
            Huge Card
            
              Variant
            
            
              This is a huge card
            
          
          
            
               Fomantic-UI
            
        
        
          
            Massive Card
            
              Variant
            
            
              This is a massive card
            
          
          
            
               Fomantic-UI

더 알아보기 (Learn more)