Skip to content

Instantly share code, notes, and snippets.

@CodeAkinori

CodeAkinori/style.ts

Created June 30, 2025 14:48
Show Gist options
  • Save CodeAkinori/f20a2bedb6de7c009670842af788f477 to your computer and use it in GitHub Desktop.
Save CodeAkinori/f20a2bedb6de7c009670842af788f477 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. CodeAkinori created this gist Jun 30, 2025.
    70 changes: 70 additions & 0 deletions style.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    import styled from 'styled-components'
    import { colors } from '../../styles'
    import { TagContainer } from '../Tag/styles'

    export const Card = styled.div`
    background-color: ${colors.white};
    display: block;
    margin-bottom: 48px;
    position: relative;
    color: ${colors.tertiary};
    ${TagContainer} {
    margin-right: 8px;
    }
    .title {
    display: flex;
    justify-content: space-between;
    }
    .rate {
    display: flex;
    align-items: center;
    p {
    margin-right: 8px;
    font-size: 18px;
    font-weight: bold;
    }
    }
    `
    export const Info = styled.div`
    display: flex;
    position: absolute;
    top: 16px;
    right: 16px;
    `

    export const CardImage = styled.div`
    display: flex;
    img {
    width: 100%;
    height: 217px;
    object-fit: cover;
    }
    `

    export const Title = styled.h3`
    font-size: 18px;
    font-weight: 700;
    display: block;
    margin-top: 16px;
    margin-bottom: 8px;
    `

    export const Description = styled.p`
    font-size: 14px;
    line-height: 22px;
    display: block;
    margin-top: 16px;
    margin-bottom: 16px;
    `
    export const CardBody = styled.div`
    padding: 8px;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: #e66767;
    margin-top: -4px;
    `