Tianyu Yuan

Components. The DIY components used in this website, inspired by Next UI.

Text Rich text with well-defined typographic styles. This is a hero text.h1: This is a h1 text.h2: This is a h2 text.h3: This is a h3 text.h4: This is a h4 text.p: This is a p text.sm: This is a sm text.b: This is a bolded text.em: This is a emphasized text.

The links would be rendered by different color according to its attribute.primary secondary success warning error

The Card component has three parts: header, body, and footer, which can be separately defined by slot tags.

Card header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus

Card footer

Cards' visual styles can be defined by variant attribute. There are three variants: shadow(default), flat, and bordered

This is a shadow card

This is a flat card

This is a bordered card

If isHoverable attribute is enabled, the card will have shadow effect while mouse is hovering over it.

Hover effect enabled

Additionally, you can also design a fine looking card with image cover.

TO EXPORE

The breathtaking scene in nature

Travel App

DIVE INTO

Life is best spent by the sea

Travel App

NavBar

Sparkle This is sparking text. You can use it to wrap some text or img elements. Also, it has some interesting effect, like: rainbow sparkles . You can also choose whatever color you like: lightseagreen sparkle.

Description The component contains an image and it's description. The corners of the image have been rounded. The image is defined by prop. The description could be defined as a child components.

Hi there!Dignissimos asperiores Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugit earum voluptas officia, quasi saepe et commodi, dolores cumque quam fuga ullam, itaque ea dignissimos asperiores adipisci ad eveniet repellendus

The image and text's order could be reversed when you pass props. Additionally, the width proportion of the image and text area can be modified by given number to or props.

ArticleTitle

Cyberpunk 2077 is now released

2077/10/13Cyberpunk 2077 is an open-world, action-adventure story set in Night City, a megalopolis obsessed with power, glamour and body modification

Game

RPG

Cyberpunk

CDPR

Designed & Coded by Tianyu @2022