Basic styling on a Card in Semantic UI React

Semantic UI seems to be one of the leading styling frameworks, so I've been spending time working with it and most of all I really like using their Card objects to display bundles of info on the screen in such a way that looks pleasing to the eye.

If you are an avid Semantic user, you would know right where to go to find the information on the Semantic website. In this I'm also going to show how to navigate the website a little more to help get the info you're looking for, and what to try if you aren't getting the results you want from normal semantic props.

So really most of you are going to know how to find where the Cards in the main page of Semantic, but in case you are fresh, you can use the dark(inverted) scroll menu to left to find the component you're looking for, or use the search bar if you know specifically what you're looking for. After that you can see the display menu for the different representations of card compoonents.

Once you are here, there's the "props" slide button which will show you the available props that are specific to its component. You can also see your sub components in the highlighted area. These are also only available to its specific main component for example:

import React from "react";
import { Card } from "semantic-ui-react";

export default class Card extends React.Component {
  render() {
    return (
      <Card>
        <Card.Content header={"Hello World!"} />
        <Card.Content>
          <Card.Description>
            Hello World!
          </Card.Description>
        </Card.Content>
      </Card>
    );
  }
}

In the code above, you can see the component is outside the sub components to help with flexible customization of content. This means you can use the different sub components in different positions in the main component to achiech the look you are going for. Now with this in mind you are able to go through whichever component you are using at the time, for instance a Card like above, and look through the props of the main component and the sub components to figure out what you need specifically. In the above code the output would be a basic card with two sections, a header and the description sections. The header is written in shorthand in the way that there is not closing tag, and the description is written with a closing tag. Both are correct and are should output what you are looking for.

At this point you should be able to import this component and use the card as a working component. This is where things really start to get interesting when it comes to styling and getting the card to act and look the way you expect as well. When you go to look through the props of these components in the beginning, the Semantic team has listed the specific values that specific props accept as well. You are able to get a lot of different functionality from these props and their specific values. Now you can start adding the different sub components and styling them the way you want... for the most part.

import React from "react";
import { Card, Icon, Button } from "semantic-ui-react";

export default class randomCard extends React.Component {
  render() {
    return (
      <Card>
        <Card.Content header={"Hello World!"} textAlign="center" />
        <Card.Content>
          <Card.Description>Hello World!</Card.Description>
        </Card.Content>
        <Card.Content extra>
          <Icon name="money bill alternate outline" />
          Money Icon
          <Button color="green" inverted floated="right">
            Submit
          </Button>
        </Card.Content>
      </Card>
    );
  }
}

In the example above, I've added a second content area to the car and added an "Icon" and "Button" components, styled with the "inverted" and "floated" props. Notice that the text next to the icon inside of this second content component is grey. This is a product of the design team to make a visible change in content to display the two different content sections. I haven't figure out a way around this as of writing this but I haven't found the need for it either.

Moving on to the inverted prop which can be used on other semantic components as well if specified, and does what is sounds like. It takes the component its used in and converts the color scheme, normally from white to black, or when used on buttons it changes from a solid colored button to an outlined button of the same color you give it with a "color" prop. The floated prop is the same basic idea as "float" in CSS, but with the semantic prop is only offers the ability to float to the left or right. there are other ways around this like using the "textAlign" prop on the parent component to try and get your other elements in the place you want. Sometime this doesn't always work and there are other ways to finely tune your specific component style.

import React from "react";
import { Card, Icon, Button } from "semantic-ui-react";

export default class randomCard extends React.Component {
  render() {
    return (
      <Card>
        <Card.Content header={"Hello World!"} textAlign="center" />
        <Card.Content
          style={{
            height: "200px",
            backgroundImage: `url(https://cdn.pixabay.com/photo/2017/05/13/15/18/dear-2309801_1280.jpg)`,
            backgroundSize: "cover",
          }}
        >
          <Card.Description style={{ color: "white" }}>
            Hello World!
          </Card.Description>
        </Card.Content>
        <Card.Content extra>
          <Icon name="money bill alternate outline" />
          Money Icon
          <Button color="green" inverted floated="right">
            Submit
          </Button>
        </Card.Content>
      </Card>
    );
  }
}

there is one extra prop that you can use on almost all(if not all) components to help get more styling done. This is where the "style" prop comes into play. This prop is for implementing CSS styling inside the components themselves. Now if you are looking to keep all styling done in your CSS folder then this is probably not an option for you. Personally I find it a lot easier to style the direct element I need this way, rather than styling through the CSS file, as you can write your components and style them all in the file or even in the same effort if you know how you want to style it already.

In the above example, the component is styled using the ladder of both semantic specific props, on CSS styling through the style prop. Being able to know what styling your component already has on it also makes it easier to avoid overlapping different styling patterns. I styled the the main content component to be a specific height and a background image, with its size set to "cover" to cover the container its in. The text on the inside is originally set to black but now with the style prop, i was able to select the specific component the text was in, and change the color to white for visibility.

Hopefully after getting this far, you are now a little more comfortable with how to work with, not only a card, but other components and how to dig through some of the information on the Semantic website.

The best advice of coarse when getting stuck on how to get something to work a specific way, is just to give a good google search and then cross reference what you do know with your you are searching to try and achieve your main goal.

Thanks for the read, good luck and happy coding!