Overview of marks

See also other faculty-specific tags.

Component usage and extensions

Faculty extension components are HTML tags beginning with fi-, which are intended to simplify the entry of more complex structures from the official catalog. However, we only provide abbreviations for components that are expected to be used frequently in the Faculty Wiki.

Therefore, the superstructure can be combined with other JVS components. In addition, components that represent text can be customized using the class attribute. The official catalog provides several base classes that can be used to customize the properties of not only plain text, but also, for example, the title in the Hero Box.

Content wrapper

fi-row ( JVS documentation)
This component is one of the most important because it shapes the content of the page. It is not directly visible, but it limits the width of text or other graphical content by adding borders on both sides.

Optional attributes

box-content

Limits the width to two-thirds of the original value.

The default value of the box-content attribute depends on the content. If the content consists only of text nodes (i.e. plain text, or the tags strong, em etc.) then box-contentis automatically enabled, otherwise it is not applied.

Examples of

The first example is just a simple paragraph for comparison.

<p>text...</p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Tip: you can also use justifiedfor blocks of text.

<fi-row box-content><p class="justified">text...</p></fi-row>

Grid

fi-grid, fi-cell ( JVS documentation)
The fi-grid component allows you to split content into multiple "cells" ( fi-cell). The entire width of the page is divided into 12 columns. Each cell then occupies one or more columns, which can be set with the size attribute.

<fi-grid>
    <fi-cell size="6">buňka 1</fi-cell>
    <fi-cell size="4">buňka 2</fi-cell>
    <fi-cell size="2">buňka 3</fi-cell>
</fi-grid>

Optional attributes for fi-grid

default-size="(L,M,S,XS|N|default|twocols)"

Default cell size. This is specified as four numbers 1 to 12 separated by a comma ( ,). These numbers successively represent the cell size on a computer ( L), tablet ( M), mobile portrait ( S) and mobile landscape ( XS). You can also specify just one number, N, which is then used for all four of these width/view types.
The value default represents 3,6,12,6, twocols means 6,6,12,6.
Cells of fi-cell can overlay this value with their own size attribute value.

Optional attributes for fi-cell

size="(L,M,S,XS|N|default|twocols)"

The actual size of the cell. If the parent element fi-grid does not have an attribute default-size, then the attribute sizeis mandatory here. The other values ( default, twocols, ...) have the same meaning as for default-size.

Automatic columns

fi-cols, fi-cols-sep
fi-cols divides the content inside into columns, with the column separator being the fi-cols-sep tag. The width of the columns is determined automatically. If you want columns of different widths, use the grid ( fi-grid).

The columns are implemented as grid cells, so you can create only 1, 2, 3, 4 or 6 columns.

Examples

<fi-cols>
    jeden sloupec
</fi-cols>

<fi-cols>
    první sloupec
    <fi-cols-sep></fi-cols-sep>
    druhý sloupec
</fi-cols>

<fi-cols>
    první sloupec
    <fi-cols-sep></fi-cols-sep>
    druhý sloupec
    <fi-cols-sep></fi-cols-sep>
    třetí sloupec
</fi-cols>

Hero box

fi-hero, fi-hero-img ( JVS documentation)
Creates a large heading with a link, background, border, or image. To insert an image in the border, use the fi-hero-imgcomponent with the same attributes as the standard img. To insert a background image for the entire component, use the bg attribute.

Optional attributes

href="ADRESA"

The header will have a link to the specified address.

bordered

A border will be created around the title.

bg="(fi|muni|URL)"

Sets the background color, fi for faculty and muni for university. The value can also be the URL of the image to be used as the background.

bg-gradient

In combination with bg="URL", overlays a gradient image for better readability.

particles="(fi|muni)"

Displays particles, fi for ones and zeros, muni for dragons in the university and faculty colors.

Do not use this component inside fi-row!

It is not recommended to combine the bg attribute with a value like URL and fi-hero-img.

Extension classes from the standard JVS kit can be specified in the class attribute , see the JVS kit documentation.

Setting the title

For convenience, the first heading in the fi-herocontent is automatically added to the box-hero__title class.

In addition, the light class for the headline is automatically overridden to box-hero__title--light.

Examples of

Buttons

fi-buttons, fi-button ( JVS documentation)
The first component creates a wrapper for the buttons, into which the buttons can then be inserted. The wrapper is important for multiple buttons side by side so that they are not too close together.

Mandatory attributes for fi-button

href="ADRESA"

Button reference.

title="POPIS"

Text in the button description.

Optional attributes for fi-button

small

Smaller button.

bordered

Button with colored border instead of background.

bg="(fi|muni)"

Button color, fi for faculty (default), muni for university.

Examples

<fi-buttons>
    <fi-button title="Domů" href="/"></fi-button>
    <fi-button title="Domů" href="/" bg="muni"></fi-button>
    <fi-button title="Domů" href="/" bordered></fi-button>
    <fi-button title="Domů" href="/" bg="muni" bordered></fi-button>
</fi-buttons>

Home Home Home Home

Same as above plus the small attribute:

Home Home Home Home

Source Code

fi-code ( JVS documentation)
Inserts color-coded highlighted source code into the document. Uses highlight .js. If the attribute commented is specified, then the content of the tag in the comment is expected.

Optional attributes

commented

Allows easier writing of code containing multiple characters with special meaning in HTML (e.g., < or >). The content is expected to be wrapped in an HTML comment ( <!-- ... -->), which can then directly write, for example, < instead of <.

syntax="LANGUAGE"

Sets the highlighting to the specified language. If not specified, the highlighter will try to heuristically guess the language itself.

Examples

Simple code sample

<fi-code>
    # limit available resources
    help ulimit
    # cap the size of virtual memory to 20000 kB
    ulimit -v 20000
</fi-code>

# limit available resources
help ulimit
# cap the size of virtual memory to 20000 kB
ulimit -v 20000

Code sample in comment with language set to HTML

<fi-code commented syntax="html"><​!--
    <fi-element attribute="value">
        inner contents
    </fi-element>
--​></fi-code>

<fi-element attribute="value">
    inner contents
</fi-element>

Timeline

fi-timeline, fi-timeline-item ( JVS documentation)
Creates a timeline where the individual axis items are described by the tag fi-timeline-item.

Attributes for fi-timeline

type="(default|center|boxes)"

Type of timeline, see examples. If not specified, defaultis used.

Mandatory attributes for fi-timeline-item

title="POPIS"

A short description of the timeline point.

Optional attributes for fi-timeline-item

bg

Highlight the timeline point with a faculty background.

end

Indicates the last point of the timeline.

date="TEXT"

Date.

href="ADRESA"

The point will reference the specified address, but no other reference may appear in the description.

Examples

Default type ( type="default" or nothing)

<fi-timeline>
    <fi-timeline-item title="První bod"></fi-timeline-item>
    <fi-timeline-item title="Nějaký důležitý bod" date="19. ledna 2038"></fi-timeline-item>
    <fi-timeline-item title="Bod s&nbsp;odkazem" href="https://www.fi.muni.cz"></fi-timeline-item>
    <fi-timeline-item title="Poslední bod" end></fi-timeline-item>
</fi-timeline>

Center alignment ( type="center")

<fi-timeline type="center">
    <fi-timeline-item title="První bod"></fi-timeline-item>
    <fi-timeline-item title="Nějaký důležitý bod" date="19. ledna 2038"></fi-timeline-item>
    <fi-timeline-item title="Bod s&nbsp;odkazem" href="https://www.fi.muni.cz"></fi-timeline-item>
    <fi-timeline-item title="Poslední bod" end></fi-timeline-item>
</fi-timeline>

Rectangular type ( type="boxes")

<fi-timeline type="boxes">
    <fi-timeline-item title="Začátek">
        Popis začátku.
    </fi-timeline-item>
    <fi-timeline-item title="Nějaký důležitý bod" date="19. ledna 2038"></fi-timeline-item>
    <fi-timeline-item title="Bod s&nbsp;odkazem" href="https://www.fi.muni.cz"></fi-timeline-item>
    <fi-timeline-item title="Jiný důležitý bod" bg></fi-timeline-item>
    <fi-timeline-item title="Konec" end></fi-timeline-item>
</fi-timeline>