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.
This componet uses the tooltip to show the meaning of a
abbr?
abbreviation
. The abbr would be decorated with a pink '?' mark at the top right corner.
The links would be rendered by different color according to its attribute.primarysecondarysuccesswarningerror
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

NavBarColorSwitch
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.
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
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


Image Components Image components has two main components: Image and ImageBg. Both of them have blur effect while loading. Behind the stage, the child component ImageBlur has been builded as the mask of the image, which is powered by BlurHash. Now let's see how it looks! Image This component is just like <img> elements with blur effect on loading. It has four properties:
  • src (string): the source of the image
  • hash (string): the hash string represents the image, see BlurHash.
  • aspectRatio (optional: number): height / width * 100
  • alt (optional: string): the description of the image

ImageBgDefine Image as the background of a <div>. The image will be at central, fills div, and won't leave any blank edges. The most important thing it that the image won't be deformed.
300px
ImageBlurThis component has two properties:
  • hash (string): the number represents the image after BlurHash encoding.
  • aspectRatio (number): height / width * 100

Original picture
Blurred picture
Designed & Coded by Tianyu @2022~2024